font-weight

/* <font-weight-absolute> keyword values */
font-weight: normal;
font-weight: bold;

/* <font-weight-absolute> numeric values [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

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

Свойство font-weight задаётся с помощью значения <font-weight-absolute> или значения относительной жирности, как указано ниже.

normal

Нормальная жирность шрифта. То же самое, что и 400.

bold

Жирный шрифт. То же самое, что и 700.

<number>

Значение <number> от 1 до 1000 включительно. Большие числа соответствуют более жирному шрифту (или той же жирности), что и меньшие числа. Это позволяет тонко настраивать жирность для переменных шрифтов. Для обычных шрифтов, если указанная жирность недоступна, используется алгоритм подбора запасного значения — числовые значения, делящиеся на 100, соответствуют общим именам жирности, как описано в разделе Сопоставление общих имён жирности ниже.

lighter

Шрифт на один уровень легче, чем у родительского элемента. Обратите внимание, что для расчёта относительной жирности учитываются только четыре значения жирности шрифта; см. раздел Значение относительных жирностей ниже.

bolder

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

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

• Если целевое значение жирности находится между 400 и 500 включительно:

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

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

• Если указано значение жирности больше 500, искать доступные значения жирности, большие чем целевое, в порядке возрастания. Если совпадения нет, искать доступные значения жирности, меньшие чем целевое, в порядке убывания.

Когда указано lighter или bolder , следующая таблица показывает, как определяется абсолютная жирность шрифта элемента.

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

Числовые значения 100 до 900 приблизительно соответствуют следующим общим именам жирности (см. спецификацию OpenType):

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

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

Этот пример загружается со значением font-weight: 500;. Измените значение свойства font-weight в селекторе .sample для изменения жирности текста (например, 200, 700). Нажмите "Воспроизвести" в блоках кода ниже, чтобы отредактировать пример в MDN Playground:

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

.sample {
  text-transform: uppercase;
  font-weight: 500;
  font:
    1.5rem "MutatorSans",
    sans-serif;
}

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

• MDN Понимание WCAG, объяснения руководящих принципов 1.4
• Понимание критерия успеха 1.4.8 | W3C Понимание WCAG 2.0

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <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

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps heavier than
   normal but less than a standard bold. */
div {
  font-weight: 600;
}

/* Set span text to be one step lighter
   than its parent. */
span {
  font-weight: lighter;
}

Результат

• font-family
• font-style
• Основные принципы стилизации текста и шрифтов
• Модуль CSS шрифты