font-stretch

Baseline Широко распространённое

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

Примечание: Свойство font-stretch сейчас переименовано в font-width в спецификациях. Название font-stretch сохранено в качестве псевдонима для свойства font-width. Новое название font-width пока не поддерживается ни одним браузером.

Свойство font-stretch CSS выбирает обычный, сжатый или расширенный шрифт из набора.

Попробовать

Синтаксис

/* <font-stretch-css3> keyword values */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

Это свойство может быть указано как одно <font-stretch-css3> ключевое слово или одно <percentage> значение.

Значения

normal: Устанавливает обычный шрифт.
semi-condensed, condensed, extra-condensed, ultra-condensed: Устанавливает более сжатый шрифт, чем обычный, при этом ultra-condensed — самый сжатый.
semi-expanded, expanded, extra-expanded, ultra-expanded: Устанавливает более расширенный шрифт, чем обычный, при этом ultra-expanded — самый расширенный.
<percentage>: Значение <percentage> от 50% до 200% (включительно). Отрицательные значения для этого свойства не допускаются.

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

В таблице ниже показано сопоставление ключевых слов <font-stretch-css3> с числовыми процентами:

Ключевое слово	Процент
`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%

Описание

Некоторые наборы шрифтов предлагают дополнительные варианты шрифтов, в которых символы уже, чем в обычном варианте (сжатые варианты) или шире, чем в обычном варианте (расширенные варианты).

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

Выбор набора шрифтов

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

В таблице ниже показано влияние различных процентных значений font-stretch на два разных шрифта:

Anek Malayalam — это переменный шрифт Google, который поддерживает ширины от 75% до 125%. Значения ниже и выше этого диапазона выбирают наиболее соответствующий шрифт.
Inconsolata — это переменный шрифт, который предлагает непрерывный диапазон ширин от 50% до 200%.

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

Начальное значение	`normal`
Применяется к	всем элементам и тексту. Он также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	растяжение шрифта

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

font-width = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

Примеры

Установка процентных значений растяжения шрифта

<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-family: "LeagueMonoVariable";
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

p {
  font:
    1.5rem "LeagueMonoVariable",
    sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`font-stretch`	60 Для работы этого свойства необходимо добавить определение `font-stretch` в `@font-face`.	12	9	47 Для работы этого свойства необходимо добавить определение `font-stretch` в `@font-face`.	11	60 Для работы этого свойства необходимо добавить определение `font-stretch` в `@font-face`.	9	44 Для работы этого свойства необходимо добавить определение `font-stretch` в `@font-face`.	11	8.0 Для работы этого свойства необходимо добавить определение `font-stretch` в `@font-face`.	60 Для работы этого свойства необходимо добавить определение `font-stretch` в `@font-face`.
`percentage`	62	18	61	49	11.1	62	61	46	11.3	8.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-stretch