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

Не підтримується


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

Приклади


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

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

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

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

div {


    font-stretch: expanded;


}

Додаткові посилання