Свойство font weight CSS

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

CSS

span {
    font-weight: bold;
}

В качестве значения свойство font-weight принимает ключевое слово или числовое значение. Доступные ключевые слова:

• normal;
• bold;
• bolder;
• lighter.

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

• 100;
• 200;
• 300;
• 400;
• 500;
• 600;
• 700;
• 800;
• 900.

Значение ключевого слова normal соответствует числовому значению 400, а значение CSS font weight bold - числовому значению 700.

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

Если шрифт имеет жирную ("700") или обычную ("400") версию, то браузер будет использовать их. Если они не доступны, браузер будет имитировать собственную жирную или нормальную версию. Для шрифтов часто используют такие названия, как "Regular" и "Light", чтобы определить альтернативные значения толщины шрифта.

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

Посмотреть демо - версию

В приведенной выше демо-версии используется бесплатный шрифт Open Sans, реализуемый с помощью API Google Web Fonts. Шрифт загружается со всеми доступными значениями толщины. С помощью свойства CSS font-weight в тексте каждого абзаца отображаются различные доступные версии. Недоступная версия выводится как логически ближайшая толщина.

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

Использование ключевых слов "bolder" и "lighter"

Значения ключевых слов "bolder" и "lighter" зависят от вычисляемой толщины шрифта родительского элемента. Браузер будет искать ближайшую к "bolder" или "lighter" толщину в семействе шрифта. Иначе браузер просто установит "400" или "700".

Дочерние элементы не наследуют значения ключевых слов "bolder" и "lighter", но вместо этого наследуют вычисленную толщину.

Поддержка браузерами