font-stretch

Базовая линия Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2017 года.

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

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

Синтаксис

/* 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% отображаются как более широкий вид.

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

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

Ключевое слово	Процент
`ultra-condensed`	50%
`extra-condensed`	62.5%
`condensed`	75%
`semi-condensed`	87.5%
`normal`	100%
`semi-expanded`	112.5%
`expanded`	125%
`extra-expanded`	150%
`ultra-expanded`	200%

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

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

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

Доступность

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

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

Связанное правило	`@font-face`
Начальное значение	`normal`
Вычисленное значение	как указано

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

Ошибка: не удалось найти синтаксис для этого элемента

Примеры

Установка диапазона процентов для font-stretch

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

@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: 87.5% 112.5%;
}

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

Спецификация
CSS Fonts Module Level 4 # font-prop-desc

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-stretch`	62	17	62	49	10.1	62	62	41	10.3	6.0	62

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch