Перейти к содержанию

font-stretch

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

Демо

Шрифт и Цвет

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Keyword 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;

/* 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 на вид букв в тексте показано на рис. 1.

Рис. 1. Вид букв при разных значениях font-stretch

Примечание

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

Значение по-умолчанию:

1
font-stretch: normal;

Применяется ко всем элементам

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

Поддержка браузерами

Can I Use css-font-stretch? Data on support for the css-font-stretch feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>font-stretch</title>
    <style>
      p {
        font-size: 5em;
        font-family: 'Myriad Pro';
      }
    </style>
  </head>
  <body>
    <p>
      <span style="font-stretch: ultra-condensed">Б</span>
      <span style="font-stretch: extra-condensed">Б</span>
      <span style="font-stretch: condensed">Б</span>
      <span style="font-stretch: semi-condensed">Б</span>
      <span style="font-stretch: normal">Б</span>
      <span style="font-stretch: semi-expanded">Б</span>
      <span style="font-stretch: expanded">Б</span>
      <span style="font-stretch: extra-expanded">Б</span>
      <span style="font-stretch: ultra-expanded">Б</span>
    </p>
  </body>
</html>

Комментарии