Свойство CSS `font-weight`

Свойство font-weight CSS задаёт насыщенность (или жирность) шрифта. Доступные значения зависят от текущего значения font-family.

Попробуйте

font-weight: normal;

font-weight: bold;

font-weight: lighter;

font-weight: bolder;

font-weight: 100;

font-weight: 900;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

section {
  font-size: 1.2em;
}

Синтаксис

/* <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;

Значения

Свойство задаётся одним значением из следующего списка:

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). Нажмите «Play» в блоках кода ниже, чтобы открыть пример для редактирования в 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-size: 1.5rem;
  font-family: "MutatorSans", sans-serif;
}

Доступность

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

• Пояснения MDN к руководству WCAG 1.4

• [Понимание критерия успеха 1.4.8

  W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

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

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

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
• Атрибут font-weight в SVG
• Основы стилизации текста и шрифтов
• Шрифты CSS