Как установить стиль шрифта. CSS-свойство font

27 мая 2023

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

Свойство в общем виде записывается так:

selector {
  font: font-family font-style font-variant font-weight font-size line-height;
}

font-family — устанавливает семейство шрифтов.

font-style — задаёт стиль шрифта.

font-variant — определяет вариант шрифта.

font-weight — задаёт жирность шрифта.

font-size — указывает размер шрифта.

line-height — задаёт высоту строки.

Значения и примеры использования

Font-family

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

Как сверстать доступный сайт

h1 { 
  font-family: 'Arial', 'Verdana', sans-serif;
}

Font-style

Можно выбрать один из стилей оформления текста: обычный шрифт normal, курсив italic, наклонный oblique.

p {
  font-style: italic;
}

Font-variant

У свойства font-variant несколько значений:

normal — обычный текст;

small-caps — все строчные символы отображаются как заглавные уменьшенного размера.

.small-caps {
  font-variant: small-caps;
}

Font-weight

Насыщенность шрифта можно определить числовым значением от 100 до 900 или ключевым словом, например, обычный шрифт normal, полужирный bold.

Возможные значения font-weight:

100: Thin;
200: Extra Light (Ultra Light);
300: Light;
400: Normal;
500: Medium;
600: Semi Bold (Demi Bold);
700: Bold;
800: Extra Bold (Ultra Bold);
900: Black (Heavy).

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).

.bold {
  font-weight: bold;
}

Font-size

Размер шрифта font-size измеряется в пикселях (px), процентах, относительных (em, rem) или абсолютных единицах (pt, cm, mm).

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

.one {
  font-style: normal;
  font-size: xx-large;
}

.two {
  font-style: normal;
  font-size: x-small; 
}

Line-height

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. По умолчанию line-height имеет значение normal. Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.

.two {
  line-height: 1.5;
}

Потренироваться в оформлении текста

Наследование

Свойство font наследуется от родительского элемента на его дочерние элементы.

Нюансы

✅ Если заданы различные атрибуты шрифта в разных правилах для одного элемента, последнее применённое свойство переопределит предыдущие.

p {
  font-family: 'Arial';
  font-size: 16px;
  line-height: 26px;
}
 
.two {
  font-family: 'Verdana';
  font-size: 21px;
}

Для второго абзаца заданы сначала общие параметры, а затем переопределены в селекторе по классу

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

h1 {
  font-family: 'PT Sans Regular','Arial', sans-serif;
}

Шрифт PT Sans Regular недоступен, поэтому заголовок оформлен шрифтом Arial

⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Чем заменить свойство font

Если нужно управлять отдельными атрибутами шрифта, например, размером, начертанием, жирностью, можно использовать соответствующие отдельные свойства — font-size, font-style и font-weight.