font-weight

Интерактивный пример

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

Синтаксис

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

Значения

normal: Нормальное начертание. То же, что и 400.
bold: Полужирное начертание. То же, что и 700.
lighter: Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
bolder: Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100, 200, 300, 400, 500, 600, 700, 800, 900: Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.

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

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

Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значение	`жирнее`	`светлее`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

Значение	Общее название
`100`	Тонкий (Волосяной) Thin (Hairline)
`200`	Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
`300`	Светлый Light
`400`	Нормальный Normal
`500`	Средний Medium
`600`	Полужирный Semi Bold (Demi Bold)
`700`	Жирный Bold
`800`	Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
`900`	Чёрный (Густой) Black (Heavy)

Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

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

<font-weight-absolute> | (en-US) bolder | (en-US) lighterгде 
<font-weight-absolute> = normal | (en-US) bold | (en-US) <number [1,1000]>

Примеры

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Назначение тексту элемента <p> жирного начертания. */
p {
  font-weight: bold;
}

/* Назначение тексту элемента <div> жирности, которая больше на два уровня,
чем normal, но все ещё меньше, чем стандартный bold. */
div {
 font-weight: 600;
}

/* Назначение тексту элемента <span> жирности,
которая на один уровень меньше, чем у его родителя. */
span {
  font-weight: lighter;
}

Result

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

Specification
CSS Fonts Module Level 4 # font-weight-prop

Начальное значение	`normal`
Применяется к	все элементы. Это также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Обработка значения	ключевое слово или числовое значение, с `bolder` и `lighter`, трансформируемися в действительное значение
Animation type	жирность шрифта

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

BCD tables only load in the browser

наследуемое значение	`жирнее`	`светлее`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

наследуемое значение	`жирнее`	`светлее`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

наследуемое значение	`жирнее`	`светлее`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700