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

Дескриптор font-width CSS позволяет авторам задавать обычное, узкое или широкое начертание для шрифтов, указанных в at-правиле @font-face.

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

Синтаксис

/* Single values */
font-width: ultra-condensed;
font-width: extra-condensed;
font-width: condensed;
font-width: semi-condensed;
font-width: normal;
font-width: semi-expanded;
font-width: expanded;
font-width: extra-expanded;
font-width: ultra-expanded;
font-width: 50%;
font-width: 100%;
font-width: 200%;

/* Multiple values */
font-width: 75% 125%;
font-width: condensed ultra-condensed;

Дескриптор font-width может принимать одно значение из приведённого ниже списка.

Значения

normal

Задаёт начертание обычной ширины.

semi-condensed, condensed, extra-condensed, ultra-condensed

Задаёт более узкое начертание, чем обычное; ультраузкое начертание является самым узким.

semi-expanded, expanded, extra-expanded, ultra-expanded

Задаёт более широкое начертание, чем обычное; ультраширокое начертание является самым широким.

<percentage>

Значение <percentage> от 50% до 200% включительно. Отрицательные значения для этого дескриптора недопустимы.

В предыдущих версиях спецификации font-width дескриптор принимал только девять ключевых слов. CSS Fonts Level 4 расширяет синтаксис, позволяя использовать также значение <percentage>. Благодаря этому вариативные шрифты могут обеспечивать непрерывное изменение ширины символов. В вариативных шрифтах TrueType или OpenType для изменения ширины используется вариация wdth.

Если в шрифте нет начертания, точно соответствующего заданному значению, значения меньше 100% сопоставляются с узким начертанием, а значения, большие или равные 100%, — с широким.

Сопоставление ключевых слов с числовыми значениями

В таблице ниже показано соответствие ключевых слов процентным значениям:

Вариативные шрифты

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

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

Доступность

Людям с дислексией и другими когнитивными особенностями может быть трудно читать слишком узкие шрифты, особенно если у шрифта низкий коэффициент цветового контраста.

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

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

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

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

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

Примеры

Задание процентного диапазона для font-width

В следующем примере используется шрифт League Mono. С помощью дескриптора font-width с разными ключевыми словами и процентными значениями из одного файла шрифта создаются разные семейства шрифтов.

<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>

@font-face {
  font-family: "League Mono Ultra Condensed";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-condensed; /* same as 50% */
}

@font-face {
  font-family: "League Mono Normal";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: 100%; /* same as normal */
}

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-expanded; /* same as 200% */
}

p:nth-child(1) {
  font-family: "League Mono Ultra Condensed", sans-serif;
}

p:nth-child(2) {
  font-family: "League Mono Normal", sans-serif;
}

p:nth-child(3) {
  font-family: "League Mono Ultra Expanded", sans-serif;
}

Добавление резервного значения font-stretch

Поскольку font-width пока поддерживается не во всех основных браузерах, в качестве резервного варианта можно включить устаревший дескриптор font-stretch. Разместите font-stretch перед font-width, чтобы браузеры с поддержкой использовали современный дескриптор:

@font-face {
  font-family: "MyFont";
  src: url("my-font.woff2") format("woff2");
  font-stretch: condensed; /* for browsers that don't support font-width */
  font-width: condensed;
}

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

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

См. также

• Устаревший дескриптор-псевдоним font-stretch с более широкой поддержкой в браузерах
• Дескриптор font-display
• Дескриптор font-family
• Дескриптор font-weight
• Дескриптор font-style
• Свойство font-feature-settings
• Дескриптор font-variation-settings
• Дескриптор src
• Дескриптор unicode-range