css властивість font-stretch

Властивість font-stretch встановлює вузьке, нормальне або широке накреслення шрифту, що дозволяє ущільнювати або розширювати текст.

Властивість `font-stretch`

Важливо відзначити, що властивість font-stretch насправді не розтягує шрифт. Вона просто вибирає відповідне обличчя від сімейства шрифтів. Коли обличчя не існує для заданої ширини, нормальне або згущене значення вказують на більш вузьке обличчя, в іншому випадку - більш широке обличчя. І навпаки, розширені значення вказують на більш широке обличчя, інакше вузьке обличчя.

На прикладі вище - це дуже добре видно:для першого рядка застосований шрифт "Roboto", а для другого - "Roboto Condensed", який відразу містить більш вузькі "обличчя".

В цьому контексті "обличчя" - вигляд певного гліфа (символу).

Нотатка:	Зверніть увагу, що властивість `font-stretch` спочатку було введено в CSS2, видалено в CSS2.1, але потім знову введено в CSS3.
Нотатка:	CSS2 також визначає значення `wider` i `narrower`, але наразі їх немає в специфікації CSS3.
Нотатка:	Дуже мало веб-шрифтів використовують мають відразу обличчя для нормального та вузького чи широкого відображення гліфів, тому доцільність використання цієї властивості ставиться під сумнів.
Порада:	Браузери застосовують властивість `font-stretch` не всіх шрифтів, тому ущільнення або розширення тексту може не працювати з деякими популярними і поширеними гарнітурами шрифтів. Також деякі значення можуть не давати видимого результату.

Синтаксис

font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;

Властивість font-stretch може отримувати 11 значень:


ultra-condensed: Робить літери максимально вузькими

extra-condensed: Робить літери дуже вузькими

condensed: Робить літери вузькими

semi-condensed: Робить літери трохи вузькими

normal: Літери як зазвичай

semi-expanded: Робить літери трохи широкими

expanded: Робить літери широкими

extra-expanded: Робить літери дуже широкими

ultra-expanded: Робить літери максимально широкими

initial: Модифікує всі рядкові символи як заголовні зменшеного розміру

inherit: Вказує на спадковість властивостей від свого батьківського елемента

Значення без задання:	normal
Наслідує:	Так
Анімується:	Так
JavaScript синтаксис:	object.style.fontStretch="expanded"

Переглядач
font-stretch	48.0	9.0	9.0	11.0	35.0	12.0

Переглядач
font-stretch	Не підтримується	9.0	Не підтримується

Мобільних переглядачів ще не додано.

Приклади

Динамічний приклад

See the Pen <a href='https://codepen.io/css_in_ua/pen/WLEvMb/'>Variable font demo</a> by css.in.ua (<a href='https://codepen.io/css_in_ua'>@css_in_ua</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад використання

See the Pen <a href='https://codepen.io/css_in_ua/pen/wRqaEw/'>Test for CSS font-stretch: &lt;n&rt;%</a> by css.in.ua (<a href='https://codepen.io/css_in_ua'>@css_in_ua</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад використання

See the Pen <a href='https://codepen.io/MichaelBondar/pen/oGEOJQ/'>oGEOJQ</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Зробити текст у всіх елементах <div> ширше