Дескриптор правила CSS `font-weight`

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

Обычно разработчику требуется использовать шрифты одного семейства с разными начертаниями. В традиционных, или статических, шрифтах один файл шрифта содержит символы семейства с определённым начертанием и стилем, например «Helvetica bold italic». Чтобы при вызове определённого начертания свойством font-weight отображались шрифты с лёгким, обычным, полужирным или очень жирным начертанием, можно определить несколько правил @font-face для одного семейства (все они должны иметь одинаковое значение дескриптора font-family), по одному для каждого начертания или диапазона начертаний.

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

Например, если дескриптор имеет значение font-weight: 400 600;, этот шрифт будет использоваться для данного семейства, когда свойство имеет значение font-weight: 450 или font-weight: 550. Независимо от того, является ли шрифт статическим или переменным, будет использоваться шрифт, соответствующий диапазону. В этом случае, если шрифт статический, 450 и 550 будут выглядеть одинаково. Если шрифт переменный, второй вариант будет жирнее.

Дескриптор одинаков для всех шрифтов, однако диапазон для переменного шрифта обычно будет шире — возможно, даже 1 1000, чтобы использовать один и тот же шрифт для всех значений свойства начертания.

Синтаксис

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

/* Defining a range */
font-weight: normal bold;
font-weight: 300 500;

Значения

Дескриптор font-weight принимает одну из следующих форм:

• Ключевое слово auto.
• Одно значение <font-weight-absolute>.
• Пара значений <font-weight-absolute>, разделённых пробелом.

Каждое значение <font-weight-absolute> может быть одним из следующих:

normal

Обычное начертание шрифта. То же, что и 400.

bold

Полужирное начертание шрифта. То же, что и 700.

<number>

Значение <number> в диапазоне от 1 до 1000 включительно. Чем больше число, тем жирнее начертание (или оно такое же жирное), чем у меньших чисел. Некоторые часто используемые значения соответствуют распространённым названиям начертаний, описанным ниже в разделе Соответствие распространённым названиям начертаний.

Соответствие распространённым названиям начертаний

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

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

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

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

Доступность

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

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

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

  W3C: понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

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

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

Примеры

Выбор обычного и полужирного шрифтов

В этом примере мы подключаем два шрифта с обычным и полужирным начертаниями из семейства «Fira Sans» с помощью двух правил @font-face. Мы задаём дескрипторы font-weight, соответствующие начертаниям шрифтов.

Теперь правила CSS могут выбирать обычный или полужирный шрифт семейства «Fira Sans», просто задавая свойство font-weight. Обратите внимание, что элемент HTML <strong> также выбирает полужирный шрифт, поскольку по умолчанию для элементов <strong> значение свойства CSS font-weight равно bold.

HTML

<p class="one">Fira Sans, `normal` weight paragraph</p>
<p class="two">Fira Sans, `bold` weight paragraph</p>
<p><strong>Fira Sans, &lt;strong&gt; element (`bold`)</strong></p>

CSS

@font-face {
  font-family: "Fira Sans";
  font-weight: normal;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: bold;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

Результат

Задание диапазонов font-weight

В этом примере показано, как авторы могут подключать несколько шрифтов для разных значений font-weight (и font-style), добавляя несколько объявлений @font-face с одинаковым значением font-family. Если задать дескрипторы font-weight диапазонами от 1 до 1000, то в остальной части таблиц стилей можно объявить font-weight (или font-style), и будет выбран подходящий шрифт.

HTML

<p class="one">This has a font weight of 100</p>
<p class="three">This has a font weight of 300</p>
<p class="four">This has a font weight of 400</p>
<p class="five">This has a font weight of 500</p>
<p class="seven">This has a font weight of 700</p>
<p class="nine">This has a font weight of 900</p>

CSS

Как и в предыдущем примере, мы добавляем четыре объявления @font-face для четырёх разных шрифтов семейства FireSans. Каждому объявлению задан отдельный диапазон значений font-weight, но все они используют одно и то же имя шрифта.

В первом объявлении используется FiraSans-Regular, а связанный с ним диапазон font-weight включает весь возможный диапазон значений начертания шрифта.

В трёх остальных объявлениях используются лёгкая, жирная и очень жирная версии шрифта, а соответствующие диапазоны font-weight задают поддиапазоны следующим образом:

• лёгкий шрифт связан с диапазоном 1–300
• жирный шрифт связан с диапазоном 500–700
• очень жирный шрифт связан с диапазоном 700–1000

Каскад CSS гарантирует, что три последних объявления переопределяют части диапазона, заданного в объявлении FiraSans-Regular.

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 300;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 500 700;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 700 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: 100;
}

p.three {
  font-weight: 300;
}

p.four {
  font-weight: 400;
}

p.five {
  font-weight: 500;
}

p.seven {
  font-weight: 700;
}

p.nine {
  font-weight: 900;
}

Результат

Для абзаца seven используется очень жирный шрифт. Хотя font-weight: 700 соответствует объявлениям FiraSans-Bold и FiraSans-ExtraBold, FiraSans-ExtraBold объявлен позже и поэтому переопределяет FiraSans-Bold для этого значения.

Аналогично, для 100 и 300 используется лёгкий шрифт; хотя диапазоны FiraSans-Regular и FiraSans-Light оба включают 300, FiraSans-Light объявлено позже. Вместо этого можно было бы объявить FiraSans-Regular после FiraSans-Light, но тогда пришлось бы изменить диапазон дескриптора font-weight.

Задание диапазона для переменного шрифта

В этом примере мы используем дескриптор font-weight, чтобы ограничить диапазон начертаний, доступных для переменного шрифта.

Мы подключаем переменный шрифт «League Mono» с помощью одного правила @font-face. Мы используем значение font-weight: 300 700, фактически ограничивая доступный диапазон начертаний. Если правило CSS использует шрифт «League Mono» и задаёт начертание за пределами этого диапазона, значение начертания будет ограничено диапазоном.

HTML

Мы добавляем абзац, у которого изначально задано значение 400 для <output>, поскольку это начертание по умолчанию для неоформленного текста абзацев. Этот абзац находится между двумя другими, поэтому можно сравнить отображаемое и заданное значения начертания.

Мы добавляем <input/range> типа range, вложенный в <label>, и задаём step значение 50.

<p>LeagueMono, font-weight: 300 (comparison)</p>
<p id="example">LeagueMono, font-weight: <output>400</output> (example)</p>
<p>LeagueMono, font-weight: 700 (comparison)</p>
<label
  >Change the font weight:
  <input type="range" min="50" max="1000" step="50" value="400" />
</label>

CSS

Мы задаём диапазон дескриптора font-weight равным 300 700, ограничивая переменный шрифт этим диапазоном.

@font-face {
  font-family: "LeagueMono";
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-weight: 300 700;
}

p {
  font-family: "LeagueMono", serif;
  font-size: 1.5rem;
}

p:first-of-type {
  font-weight: 300;
}

p:last-of-type {
  font-weight: 700;
}

JavaScript

Мы добавляем обработчик события, который обновляет значение свойства font-weight абзаца и изменяет текст, отражая это изменение:

const text = document.querySelector("#example");
const log = document.querySelector("output");
const range = document.querySelector("input");

range.addEventListener("change", () => {
  text.style.fontWeight = range.value;
  log.innerText = range.value;
});

Результат

Измените начертание абзаца с помощью ползунка. Обратите внимание, что пример абзаца не становится тоньше, чем абзац 300 над ним, и жирнее, чем абзац 700 под ним: начертание ограничено диапазоном, заданным дескриптором font-weight.

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

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

См. также

• font-display
• font-family
• font-stretch
• font-style
• font-feature-settings
• font-variation-settings
• src
• Дескриптор unicode-range