font-stretch CSS

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

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

normal

Значение по умолчанию:
`normal`
Наследуется:
Да
Применяется:

Ко всем элементам

Применяется:
Ко всем элементам
Анимируется:
Да
Объект JavaScript:

object.style.fontStretch

Объект JavaScript:
`object.style.fontStretch`
Спецификации:
Спецификации:
* [CSS Fonts Module Level 3](http://dev.w3.org/csswg/css3-fonts/#propdef-font-stretch)
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-font-stretch" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-font-stretch">Can I Use css-font-stretch?</a> Data on support for the css-font-stretch feature across the major browsers from caniuse.com. </p>

Синтаксис

/* 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;

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

Синтаксис

/* 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; /* Global values */ font-stretch: inherit; font-stretch: initial; font-stretch: unset;

Значения

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

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

Примечание

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

Значения

Влияние разных значений `font-stretch` на вид букв в тексте показано на рис. 1. ![Рис. 1. Вид букв при разных значениях font-stretch](https://xsltdev.ru/workspace/uploads/css/css_font-stretch.png) ### Примечание Браузеры применяют свойство `font-stretch` не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

Примеры

<!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>

Примеры

<!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>

Содержание

  • Синтаксис
      /* 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; /* Global values */ font-stretch: inherit; font-stretch: initial; font-stretch: unset;
  • Значения
    • Примеры
        <!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>

    В начало