Свойство CSS font-stretch

Свойство font-stretch делает текст шире или уже.

Это свойство является одним из свойств CSS3.

Свойство font-stretch работает не со всеми шрифтами! Оно работает только в том случае, если у font-family есть начертания с разной шириной. Само по себе свойство font-stretch не растягивает шрифт.

Это свойство принимает следующие значения:

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded
50% to 200%

Начальное значение	normal
Применяется к	Ко всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет
Анимация	Да.
Версия	CSS3
Синтаксис DOM	object.style.fontStretch = "expanded";

Синтаксис

Синтаксис свойства CSS font-stretch

css

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;

Пример использования свойства font-stretch:

Пример использования свойства CSS font-stretch со значениями ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, initial и inherit

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 4em;
        font-family: 'Myriad Pro';
      }
    </style>
  </head>
  <body>
    <p>
      <span style="font-stretch: ultra-condensed">A</span>
      <span style="font-stretch: extra-condensed">A</span>
      <span style="font-stretch: condensed">A</span>
      <span style="font-stretch: semi-condensed">A</span>
      <span style="font-stretch: normal">A</span>
      <span style="font-stretch: semi-expanded">A</span>
      <span style="font-stretch: expanded">A</span>
      <span style="font-stretch: extra-expanded">A</span>
      <span style="font-stretch: ultra-expanded">A</span>
    </p>
  </body>
</html>

Try it Yourself »

Выбор начертания шрифта

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

Значения

Значение	Описание
ultra-condensed	Сужает текст максимально сильно.
extra-condensed	Значительно сужает текст, но не так сильно, как `ultra-condensed`.
condensed	Умеренно сужает текст, но не так сильно, как `extra-condensed`.
semi-condensed	Незначительно сужает текст, но не так сильно, как `condensed`.
normal	Растяжение не применяется. Это значение по умолчанию.
semi-expanded	Незначительно расширяет текст по сравнению с `normal`.
expanded	Умеренно расширяет текст по сравнению с `semi-expanded`.
extra-expanded	Значительно расширяет текст по сравнению с `expanded`.
ultra-expanded	Расширяет текст максимально сильно.
50% to 200%	Числовые значения, представляющие коэффициент растяжения.
initial	Устанавливает свойству значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

В чём заключается свойство CSS 'font-stretch'?

Позволяет изменить соотношение сторон шрифтов без изменения их высоты.Изменяет цвет шрифта.Изменяет высоту шрифта.Позволяет изменить ширину шрифтов.

Свойство CSS font-stretch ​

Синтаксис ​

Пример использования свойства font-stretch: ​

Выбор начертания шрифта ​