Свойство CSS font-weight

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

Например, чтобы сделать жирный шрифт, нужно задать свойство:

font-weight: bold;

Значения

Свойство font-weight принимает либо значения в виде ключевых слов, либо числа в диапазоне от 100 до 900.

Доступные ключевые значения:

normal

обычный, соответствует числу 400

bold

жирный текст, соответствует числу 700

bolder

более жирный относительно начертания родителя

lighter

более тонкий относительно родителя

Также есть 2 вспомогательных значения:

• inherit – указывает наследование показателя от родителя;
• initial – установка в значение по умолчанию.

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

Если шрифт имеет жирное («700») или нормально («400») начертание как часть семейства, браузер будет использовать их. Если они недоступны, браузер смоделирует собственные жирную или нормальную версию. Но он не будет моделировать другие недоступные варианты жирности.

Иногда можно встретить термин полужирное начертание или semibold, но такого предустановленного значения в CSS нет, это соответствует жирности 600.

Следующая демонстрация показывает использование различных вариантов жирности для текста:

See the Pen
font weight by Андрей (@adlibi)
on CodePen.

В приведенной выше демонстрации используется шрифт Open Sans, встроенный с помощью Google Fonts API. Загружаются все доступные варианты жирности. Недоступные варианты просто отображают ближайшим вариантом.

Обычные шрифты, такие как Arial, Helvetica, Georgia и т. д. не имеют начертаний, отличных от 400 и 700. Таким образом, в той же демонстрации с применением одного из этих шрифтов, в девяти абзацах будет отображаться только два варианта жирности.

Использование bolder и lighter

Толщина шрифта bolder и lighter (жирнее и тоньше) вычисляется относительно родительского элемента. Браузер будет искать ближайший «более жирный» или «легкий» вес, в зависимости от того, что доступно в семействе шрифта, в противном случае он просто выберет «400» или «700», в зависимости от того, что логичнее.

Дочерние элементы не будут наследовать bolder и lighter, а вместо этого унаследуют вычисленный вес.

Что происходит при недоступности заданного значения

Если заданное числовое значение веса недоступно, для определения жирности применяется такой подход:

1. Если задано число больше 500, будет использовано первое доступное более жирное начертание (если такого нет, то первое доступное более светлое).
2. Если задано значение меньше 400, будет использовано первое доступное более светлое начертание (если такого нет, то первое доступное более жирное).
3. Если задано 400, будет применено 500. Если 500 недоступно, будет использован подход из предыдущего пункта.
4. Если задано 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для пункта 2.

Это значит, что для шрифтов, у которые есть только начертания normal и bold, значения 100-500 становятся normal, а 600-900  – bold.