Свойство CSS font-weight для определения толщины шрифта

Опубликовано автором

Параметр шрифта, которым мы можем управлять — это насыщенность или толщина шрифта. Шрифт может быть жирнее или тоньше обычного начертания. Устанавливается насыщенность с помощью свойства font-weight. В качестве значения можно использовать ключевое слово или число. Самые часто встречающиеся значения:

400 или normal — обычный шрифт, значение по умолчанию;

700 или bold — жирный шрифт.

Например:

h1 {
  font-weight: 400; /* то же самое что и normal */
}

p {
  font-weight: bold; /* то же самое что и 700 */
}

На самом деле, font-weight может принимать одно из числовых вариантов насыщенности:

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

Все эти числовые значения задают степень толщины шрифта от самого тонкого до самого толстого.

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

Кроме перечисленных выше числовых значений у font-weight может быть ещё два относительных значения: bolder и lighter. Эти значения делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.

Просмотры: 188