Жирный шрифт в CSS

29.03.2019 at 14:08


Жирный шрифт в CSS задается с помощью свойства font-weight. Если ему присвоить значение bold, то можно выделить особо значимые куски текста. Но это еще не все. Можно управлять жирностью шрифта с помощью цифровых значений от 100 до 900. А также можно регулировать насыщенность текста относительно родительского элемента с помощью значений bolder и lighter.
Но все это в теории, потому что правильная жирность шрифта редко отображается обозревателями. Поэтому для лучшей совместимости рекомендуется ограничиваться только значением bold.
Также разнообразие возможностей, которые получит разработчик, зависит от шрифта. Некоторые более гибки в плане диапазона жирности, а другие поддерживают только обычное и полужирное начертание.
Свойство может применяться к первой букве или первой линии абзаца с помощью префиксов ::first-letter и ::first-line.
Жирным является любой шрифт, величина которого выше 400. Стандартное полужирное начертание соответствует значению 700.

Недоступность значения

Если конкретное цифровое обозначение не поддерживается, то толщина определяется по такому принципу:

  1. Если значение свойства font-weight выше 500, то выставлено будет первое значение, которое выше него и поддерживается шрифтом. То же касается значения меньше 400, только наоборот.
  2. Если указывается точно значение 400, то применяется 500. Если такая ситуация невозможна, используется наиболее светлое начертание, которое поддерживается шрифтом.
  3. Если указывается значение 500, то применяется 400. Если не поддерживается – браузер подбирает толщину шрифта так же, как и в предыдущем пункте.

Простыми словами, если поддерживаются только нормальные и полужирные начертания, то все значения меньше 500 считаются нормальными, а все, которые выше 600 – жирными.
Применять свойство можно к любому элементу как блочному, так и строчному. Достаточно прописать соответствующий класс или идентификатор. Или просто применить стиль к тегу. Например, так.

span{
	font-weight:bold;
}

Можно прописать жирность шрифта средствами CSS непосредственно в HTML.

<p>Это слово будет <span style="font-weight:600">жирным</p>

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