③Ширина шрифта: свойство font-stretch

Продолжим изучение темы CSS - шрифты. Если пропустили прошлые статьи, то вот ссылки на них:

3. Ширина шрифта: свойство font-stretch

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

Свойство наследуется.

Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого:

font-stretch

Значения:

ultra-condensed - Указывает на наиболее сжатый шрифт.
extra-condensed - Указывает на второй по сжатости шрифт.
condensed - Указывает на сжатый шрифт.
semi-condensed - Указывает на немного сжатый шрифт.
normal - Значение по умолчанию.
semi-expanded - Слегка расширенный шрифт.
expanded - Расширенный шрифт.
extra-expanded - Второй по расширенности шрифт.
ultra-expanded - Максимально расширенный шрифт.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

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: inherit;
font-stretch: initial;

Когда не существует глифа для заданной ширины, значения normal или condensed отображаются для более узкого начертания символа, в противном случае отображается более широкое начертание. И наоборот, расширенные значения используют широкое начертание, в противном случае — узкое начертание. На рисунке ниже показано, как девять параметров свойства влияют на выбор шрифта для семейства шрифтов, содержащего различные ширины, серый цвет указывает ширину, для которой не существует начертания, поэтому подставляется другая ширина:

📷 РИС. 2. СВОЙСТВО FONT-STRETCH

Продолжение в следующей статье!