font-weight

Описание

Свойство css font-weight позволяет задать насыщенность шрифта. Возможно, вы уже сталкивались с насыщенностью шрифта, когда работали в каком-либо текстовом редакторе, и выбирали для шрифта начертание Обычный или Полужирный. Полужирный шрифт выглядит темнее обычного. Это и есть насыщенность шрифта. При создании интернет страниц для управления толщиной шрифта используют свойство css font-weight.

font-weight
Значения: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Начальное значение: normal
Область применения: все элементы
Наследование: да
Поддержка браузерами: Internet Explorer 3+, Chrome 2+, Opera 3.5+, Safari 1.3+, Firefox 1+
Примечание:

Синтаксис

font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

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

Значения

bolder
Повышение насыщенности по сравнению с насыщенностью шрифта родительского элемента
lighter
Ослабление насыщенности по сравнению с насыщенностью шрифта родительского элемента
normal
Нормальное начертание
100 — 900
Условные значения. 9 уровней насыщенности

Насыщенность шрифта имеет девять уровней от 100 до 900. Значение 100 является самым легким вариантом начертания, а 900 – самым плотным. Однако, спецификация CSS эти числа не определяет как конкретную плотность, а говорит лишь о том, что плотность должна быть не меньше предшествующего ему числа. Таким образом, 100, 200, 300 и 400 могут иметь одинаковый слабо очерченный шрифт, 500 и 600 имеют среднюю насыщенность, а 700, 800 и 900 уже формируют одинаковое очень насыщенное очертание.

Также к качестве значений можно задават ключевые слова: bold, bolder, lighter и normal.
normal соответствует значению 400, а bold — 700.

Свойство CSS front-weight является наследуемым, поэтому задавая для элемента значение bold, не забывайте, что все дочерние элементы унаследуют насыщенность родителя.

Два значения для front-weight – это bolder и lighter делают шрифт более или менее насыщенным по сравнению с насыщенностью шрифта родительского элемента. Насыщенность шрифта для родителя должна быть задана обязательна.

Пример

p {font-weight: normal;}
p em {font-weight: bolder;}

Результат

Свойство css font-weight (насыщенность шрифта)

В этом случае насыщенность шрифта абзаца будет нормальной (значение 400), а шрифт элементов, оформленных тегом <em> будет полужирным (значение 700).

Значение lighter действует аналогичным образом, но только понижая насыщенность.

Существуют шрифты одного семейства, имеющие разные названия. Например, Arial и Arial Black. Различаются они лишь насыщенностью. И при создании веб-документов логичнее будет не назначать с помощью свойства font-family элементам разные шрифты

h1 {font-family: 'Arial Black';}
h2 {font-family: 'Arial';}

а назначить всем элементам один шрифт. А для выделения других элементов изменять насыщенность шрифта с помощью свойства font-weight

body {font-family: 'Arial';}
h1 {font-family: 'Arial Black';}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *