Css font stretch: font-stretch — CSS: Cascading Style Sheets

font-stretch — CSS — Дока

  1. Кратко
  2. Как пишется
  3. Подсказки

Кратко

Секция статьи «Кратко»

Свойство font-stretch устанавливает узкое, нормальное или широкое начертание шрифта. Как и в случае font-weight, браузер не меняет рисунок шрифта, а выбирает из доступных шрифтов подходящие начертания, если они описаны в @font-face или есть в системном шрифте.

Как пишется

Секция статьи «Как пишется»

Некоторые шрифты имеют дополнительные начертания, в которых символы могут быть у́же (condensed) или шире (expanded) нормальной ширины. Если используемый вами шрифт не предполагает таких начертаний, то свойство font-stretch действовать не будет.

Возможные значения:

  • normal — нормальная или «текстовая» ширина шрифта (значение по умолчанию).
  • semi-condensed, condensed, extra-condensed, ultra-condensed — сжатое начертание разной степени.
  • semi-expanded, expanded, extra-expanded, ultra-expanded — расширенное начертание разной степени.
  • проценты — точное указание процентов. Отрицательные значения недопустимы. Границы диапазона зависят от того, какие значения поддерживает шрифт.
Пример двух разных шрифтов с значениями, указанными в процентах

Интерактивный пример использования процентов в качестве значения:

Открыть демо в новой вкладке

Сопоставление ключевых слов с числовыми значениями:

  • ultra-condensed — 50%;
  • extra-condensed — 62.5%;
  • condensed — 75%;
  • semi-condensed — 87. 5%;
  • normal — 100%;
  • semi-expanded — 112.5%;
  • expanded — 125%;
  • extra-expanded — 150%;
  • ultra-expanded — 200%.

⚠️

Некоторые шрифты поддерживают не все значения. Так, Roboto Flex поддерживает значения в диапазоне от 25 до 151% и в примере ниже font-stretch будет иметь значение 151%, а не 200%, как ожидалось.

p {  font-family: "Roboto Flex", sans-serif;  font-stretch: ultra-expanded;}
          p {
  font-family: "Roboto Flex", sans-serif;
  font-stretch: ultra-expanded;
}

Посмотреть, какие начертания поддерживает шрифт можно на Google Fonts.

Пример использования ключевых слов в качестве значения:

Открыть демо в новой вкладке

Подсказки

Секция статьи «Подсказки»

💡 Google API определяет ваш браузер для обеспечения совместимости (не все браузеры поддерживают вариативность шрифтов). Но из-за неточностей, некоторые браузеры, которые её поддерживают (например Opera), все равно получают статические шрифты. Имейте это в виду при работе с Google Fonts.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

font-size-adjust

alt +

font-synthesis

alt +

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

  • Головна
  • css
  • властивості
  • 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

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

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4

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

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

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

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

div {


    font-stretch: expanded;


}

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

font

font-family

font-size

font-weight

font-style

font-variant

font-size-adjust

font-face

font-feature-values

font-feature-settings

font-kerning

font-language-override

font-synthesis

font-variant-alternates

font-variant-caps

font-variant-east-asian

font-variant-ligatures

font-variant-numeric

font-variant-position

text-orientation

Свойство CSS font-stretch

❮ Назад Полное руководство по CSS Далее ❯


Пример

Сделать текст в элементах

шире:

div {
  семейство шрифтов: без засечек, «Helvetica Neue», «Lucida Grande», Arial;
  font-stretch: расширен;
}



Определение и использование

Свойство font-stretch позволяет создавать текст уже (сжато) или шире (расширено).

Примечание: Некоторые шрифты предоставляют дополнительные начертания; сжатые лица и расширенные лица. Для этих шрифтов можно использовать свойство

font-stretch . для выбора обычного, сжатого или расширенного шрифта.

Примечание: Это свойство не действует, если выбранный шрифт не предлагайте сжатые или расширенные лица!

Значение по умолчанию: обычный
Унаследовано: да
Анимация: да. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект .style.fontStretch=»расширенный»


Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
растяжка шрифта 48,0 9,0 9,0 11,0 35,0



Синтаксис

font-stretch: сверхсжатый|сверхсжатый|сжатый|полууплотненный|обычный|полурасширенный|расширенный|сверхрасширенный|сверхрасширенный|начальный|наследовать;

Значения свойств

Значение Описание
ультраконденсированный Делает текст максимально узким
сверхконденсированный Делает текст более узким, чем сжатый, но не таким узким, как сверхсжатый
конденсированный Делает текст уже, чем полусжатый, но не такой узкий, как сверхсжатый
полуконденсированный Делает текст более узким, чем обычно, но не таким узким, как сжатый
обычный Значение по умолчанию. Шрифт не растягивается
полурасширенный Делает текст шире обычного, но не таким широким, как при расширении
расширенный Делает текст шире полурасширенного, но не такого широкого, как экстра-расширенный
расширенный Делает текст шире расширенного, но не таким широким, как сверхрасширенный
сверхрасширенный Делает текст максимально широким
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

❮ Предыдущий Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Растяжка шрифта CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Растяжка шрифта CSS

— РЕК

  • Глобальное использование
    97,52% + 0% знак равно 97,52%

Если шрифт имеет несколько типов вариаций в зависимости от ширины символов, свойство font-stretch позволяет выбрать соответствующий вариант. Свойство само по себе не заставляет браузер растягиваться до шрифта.

Chrome
  1. 4 — 47: Not supported
  2. 48 — 107: Supported
  3. 109 — 111: Supported
Edge
  1. 12 — 107: Supported
  2. 108: Supported
Safari
  1. 3.1 — 10.1: Not supported
  2. 11 — 16.1: Supported
  3. 16.2: Supported
  4. 16.3 — TP: Supported
Firefox
  1. 2 — 8: Not supported
  2. 9 — 106 : Supported
  3. 107: Supported
  4. 108 — 109: Supported
Opera
  1. 9 — 34: Not supported
  2. 92: Supported
IE
  1. 5.5 — 8: Не поддерживается
  2. 9 — 10: поддержано
  3. 11: Поддерживается
Chrome для Android
  1. 108: Поддержано
Safari ON IOS
  1. 3.2 — 10.201193: 201193: 201193: 201193: 201193: 20193: 20193: 201193: 20193: 20193: 20193: 20193: 20193: 20193: 20193: 20193: 20193: 20193: 20193: 201193
    . Supported
  2. 16.3: Supported
Samsung Internet
  1. 4: Not supported
  2. 5 — 18.0: Supported
  3. Opera Mini
    1. all: Not supported
    Opera Mobile
    1. 10 — 12.1: Not supported
    2. 72: Supported
    UC Browser for Android
    1. 13.4: Supported
    Android Browser
    1. 2.1 — 4.4.4: Not supported
    2. 108: Поддержано
    Firefox для Android
    1. 107: Поддерживается
    QQ браузер
    1. 13.1: поддержан
  4. 13.1: поддержан
.1029292929292929292929292929291919191919191919192.
    .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *