font-weight

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Для определённого семейства шрифтов авторы могут загрузить различные начертания шрифтов, соответствующие различным стилям одного семейства шрифтов, а затем использовать описание font-weight для явного указания начертаний шрифтов. Значения описания CSS совпадают со значениями соответствующего свойства шрифта.

В общем случае для определённого семейства шрифтов доступно ограниченное количество начертаний. Когда указанное начертание не существует, используется близкое значение. Шрифты, у которых нет начертания bold, часто синтезируются пользовательским агентом. Чтобы предотвратить это, используйте сокращённое свойство font-synthesis.

Синтаксис

/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

Свойство font-weight описывается с использованием любого из указанных ниже значений.

Значения

normal: Нормальное начертание шрифта. То же, что и 400.
bold: Начертание шрифта bold. То же, что и 700.
<number>: Значение <number> от 1 до 1000 включительно. Более высокие числа соответствуют более жирным начертаниям, чем (или таким же жирным, как) меньшие числа. Некоторые часто используемые значения соответствуют общим именам начертаний, как описано в разделе «Соответствие общих имен начертаний» ниже.

В более ранних версиях спецификации font-weight свойство принимало только ключевые слова и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; непеременные шрифты могут использовать только эти заданные значения, хотя значения с высокой точностью (например, 451) будут преобразованы в одно из этих значений для непеременных шрифтов.

CSS Fonts Level 4 расширяет синтаксис, чтобы принять любое число от 1 до 1000 включительно, и вводит переменные шрифты, которые могут использовать этот более точный диапазон значений начертаний шрифтов.

Соответствие общих имен начертаний

Числовые значения от 100 до 900 примерно соответствуют следующим общим именам начертаний:

Значение	Общее имя начертания
100	Тонкий (тончайший)
200	Очень лёгкий (сверхлёгкий)
300	Лёгкий
400	Нормальный
500	Средний
600	Полужирный (полужирный)
700	Жирный
800	Очень жирный (сверхжирный)
900	Чёрный (тяжёлый)

Переменные шрифты

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

Для переменных шрифтов TrueType или OpenType используется вариация "wght" для реализации различных начертаний.

Доступность

Люди с нарушениями зрения могут испытывать трудности с чтением текста, установленного со значением font-weight 100 (Тонкий/тончайший) или 200 (Очень лёгкий), особенно если шрифт имеет низкое цветовое соотношение контрастности.

Формальное определение

Связанное правило правила	`@font-face`
Начальное значение	`normal`
Вычисленное значение	как указано

Формальный синтаксис

font-weight = 
  auto                         |
  <font-weight-absolute>{1,2}  

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

Примеры

Установка нормального начертания шрифта в правиле @font-face

Следующее находит локальный шрифт Open Sans или импортирует его и позволяет использовать шрифт для нормальных начертаний.

@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}

Спецификации

Спецификация
CSS Fonts Module Level 4 # font-prop-desc

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`font-weight`	4	12	3.5	10	3.1	18	4	10.1	2	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight