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

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

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

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

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

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

автор: Svitlana

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

Синтаксис

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

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

ultra-condensed

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

автор: Svitlana

extra-condensed

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

автор: Svitlana

condensed

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

автор: Svitlana

semi-condensed

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

автор: Svitlana

normal

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

автор: Svitlana

semi-expanded

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

автор: Svitlana

expanded

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

автор: Svitlana

extra-expanded

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

автор: Svitlana

ultra-expanded

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

автор: Svitlana

initial

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

автор: Svitlana

inherit

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

автор: Svitlana

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