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

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

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

Синтаксис

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

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

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

Значения

normal

Задаёт начертание с обычной степенью сжатия.

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

Задаёт начертание, более сжатое, чем обычное; сверхсжатое начертание является наиболее сжатым.

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

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

<percentage>

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

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

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

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

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

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

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

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

Доступность

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

• Пояснения MDN к WCAG, рекомендация 1.4

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

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

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

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

Примеры

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

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

<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-stretch: ultra-condensed; /* same as 50% */
}

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

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: 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-width, заменяющий font-stretch
• Дескриптор font-display
• Дескриптор font-family
• Дескриптор font-weight
• Дескриптор font-style
• Дескриптор font-feature-settings
• Дескриптор font-variation-settings
• Дескриптор src
• Дескриптор unicode-range