font-weight

Обновлено: 27.05.2022

font-weight

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Да

Синтаксис

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

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

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

  • 100 — тонкое начертание;
  • 200 — сверхсветлое;
  • 300 — светлое;
  • 400 — нормальное (аналогично normal);
  • 500 — среднее;
  • 600 — полужирное;
  • 700 — жирное (аналогично bold);
  • 800 — сверхжирное;
  • 900 — тяжёлое.

Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

Объект.style.fontWeight

Браузеры

font-weight

Посмотреть совместимость на Can I use?

font-weight