Font-weight - CSS-хитрости | CSS Альманах 2024

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

span ( font-weight: bold; )

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

normal
bold
bolder
lighter

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

100
200
300
400
500
600
700
800
900

Значение ключевого слова normalотображается в числовое значение, 400а значение - boldв 700.

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

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

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

Посмотрите на эту ручку!

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

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

Использование ключевых слов «жирнее» и «светлее»

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

Дочерние элементы не будут наследовать значения ключевых слов «смелее» и «легче», а вместо этого унаследуют вычисленный вес.