Руководство по свойству font в CSS

Выбор правильного шрифта (font) и стиля (style) очень важен для читабельности текста на странице.

CSS предоставляет несколько свойств для стилизации шрифта текста, включая изменение начертания, управление их размером и жирностью, вариациями и так далее.

Доступные свойства: font-family, font-style, font-weight, font-size, и font-variant.

Теперь рассмотрим каждое из этих свойств подробнее.

Свойство font-family

Свойство font-family используется для указания шрифта, который будет использоваться для визуализации текста.

Это свойство может содержать несколько разделенных запятыми имен шрифтов в качестве «резервной» системы, т.к., если первый шрифт будет недоступен в системе пользователя, браузер будет пытаеться использовать следующий и т. д., пока не найдет тот, который сможет применить.

Следовательно, сначала укажите шрифт, который вы хотите видеть, а затем любые шрифты, которые могли бы заменить первый, если он недоступен.

Вы должны закончить список любым общим семейством шрифтов (generic font) на выбор — serif, sans-serif, monospace, cursive и fantasy. Типичное объявление семейства шрифтов может выглядеть так:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Наиболее распространенные семейства шрифтов, используемые в веб-дизайне — это serif и sans-serif, потому что они больше подходят для чтения. В то время как моноширинные шрифты обычно используются для отображения кода, потому что в этом шрифте все символы занимают одинаковое пространство и выглядит как машинописный текст.

Курсивные шрифты выглядят как рукописные. Fantasy шрифты представляют собой художественные начертания, но они практически не используются из-за плохой поддержки в операционных системах.

Разница между Serif и Sans-serif шрифтами

Шрифты с засечками имеют маленькие штрихи (засечки) на концах символов, тогда как шрифты без засечек более прямые и не имеют этих маленьких штрихов. Посмотрим следующую иллюстрацию:

Подробнее о стандартных, браузерных шрифтах, здесь: web safe fonts.

Свойство font-style

Свойство font-style используется для установки стиля шрифта для текстового содержимого элемента.

Стиль может быть normal, italic или oblique. Значением по умолчанию является normal.

Давайте посмотрим следующий пример, чтобы понять, как это в основном работает:

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

Свойство font-size

Свойство font-size используется для установки размера шрифта для текстового содержимого элемента.

Есть несколько способов указать значения размера шрифта, например, ключевыми словами, %, px, em, rem и т. д.

Установка font-size в пикселях (px)

Установка размера шрифта в значениях пикселей (например, 14px, 16px и т. д.) является хорошей практикой только когда вам нужна точность. Пиксель — это абсолютная единица измерения, которая определяет фиксированное значение.

Посмотрим следующий пример, чтобы понять, как это в основном работает:

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

Определение размеров шрифта в пикселях не считается хорошей практикой, поскольку пользователь не может изменить размер шрифта в настройках браузера. Например, пользователи с ограниченным или слабым зрением могут захотеть немного увеличить размер шрифта.

Поэтому следует избегать использования значений в пикселях, а использовать относительные единицы измерения, если вы хотите создать отзывчивый дизайн.

Установка font-size в единицах em

Единица em является пропорциональной единицей измерения. При определении свойства font-size значение 1em равно размеру шрифта, который применяется к родительскому элементу.

Итак, если вы установите font-size: 20px для элемента body, то 1em = 20px и 2em = 40px.

Однако, если вы нигде не указали размер шрифта на странице, то браузер по умолчанию, будет использовать значение 16 пикселей. Соответственно, относительные единицы будет рассчитываться так: 1em = 16px и 2em = 32px.

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

h1 {
    font-size: 2em; /* 32px/16px=2em */
}
p {
    font-size: 0.875em; /* 14px/16px=0.875em */
}

Использование комбинации % и em

Чтобы упростить вычисление значений em, есть лайфхак, который состоит в том, чтобы установить font-size для элемента body равным 62,5% (чтобы единицы em рассчитывались не от 16px, а от 10px).

Теперь вы можете установить размер шрифта для любых элементов, используя единицы em, с помощью простого для запоминания преобразования, умножив значение em на 10. Таким образом, 1em = 10px, 1.2em = 12px, 1.4em = 14px, 1.6em = 16px и т.д. Давайте посмотрим на следующий пример:

body {
    font-size: 62.5%;  /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;  /* 1.4em = 14px */
}
p span {
    font-size: 2em;  /* 2em = 28px (потому что рассчитывается из родительского значения) */
}

Установка font-size в единицах rem

Для большей отзывчивости, в CSS3 введены единицы измерения rem (сокращенно от root em), которые всегда зависят от размера шрифта корневого элемента (<html>), независимо от того, где находится элемент в документе (в отличие от em, который расчитывается относительно размера шрифта родительского элемента).

Это означает, что 1rem эквивалентен размеру шрифта элемента <html>, который по умолчанию составляет 16px в большинстве браузеров. Взглянем на пример, чтобы понять, как это работает:

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (не 28px, как в предыдущем примере) */
}

Установка font-size с помощью ключевых слов

CSS предоставляет возможность использования некоторых ключевых слов для определения размеров шрифта.

Размер шрифта можно указать с помощью одного из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large. Кроме этих, есть еще ключи со значением относительного размера шрифта: smaller or larger. Посмотрим, как это работает:

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

Установка font-size в единицах vw и vh

Размеры шрифта могут быть указаны с использованием относительных единиц viewport: vw или vh.

Единицы viewport расчитываются в процентном отношении от размеров окна браузера, где 1vw = 1% ширины области просмотра и 1vh = 1% высоты области просмотра. Следовательно, если область просмотра имеет ширину 1600px, 1vw составляет 16px, но т.к. чаще область просмотра имеет ширину 1920px, то 1vw составит 19.2px

Посмотрим следующий пример:

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

Однако существует проблема с единицами viewport. На маленьких экранах шрифты становятся такими маленькими, что их трудно прочитать. Чтобы предотвратить это, вы можете использовать CSS-функцию calc(), как в примере:

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

В этом примере, даже если ширина области просмотра становится равной 0, размер шрифта будет по крайней мере равен 1em или 16px.

Для создания более гибкой типографики вы можете использовать медиазапросы CSS.

Свойство font-weight

Свойство font-weight указывает вес или жирность шрифта.

Это свойство может принимать одно из следующих значений: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 и inherit.

• Числовые значения 100—900 указывают жирность шрифта. 400 соответствует значению normal, а 700 соответствует bold.
• Значения bolder и lighter изменяют жирность текущего элемента на 100 по сравнению с жирностью родительского элемента. bolder — больше, lighter — меньше.

Давайте посмотрим на примере:

p {
    font-weight: bold;
}

Свойство font-variant

Свойство font-variant позволяет отображать текст в специальном начертании с маленькими заглавными буквами.

Маленькие заглавные буквы (small-caps) немного отличаются от обычных заглавных букв, в которых строчные буквы отображаются как уменьшенные версии соответствующих заглавных букв.

Посмотрим следующий пример:

p {
    font-variant: small-caps;
}

Значение normal переформатирует маленькие заглавные буквы в нормальные.