Свойство CSS font-stretch
Свойство CSS font-stretch делает текст уже или шире. Узнайте все значения и попробуйте примеры самостоятельно.
Свойство CSS font-stretch выбирает более узкое или более широкое начертание текущего шрифта, позволяя сжимать или расширять текст без изменения его font-size или font-weight. Оно входит в число свойств CSS3.
Важно понимать, что font-stretch не растягивает глифы так, как это делало бы преобразование. Оно лишь выбирает альтернативное начертание по ширине, которое уже включено в шрифт. Если в font-family нет вариантов по ширине, свойство не даёт видимого эффекта — текст остаётся нормальной ширины. Именно поэтому результат будет заметен только со шрифтами, включающими сжатые/расширенные варианты (например, Myriad Pro, Roboto Condensed или переменный шрифт с осью wdth).
Когда использовать
Используйте font-stretch в следующих случаях:
- Вы используете семейство шрифтов с несколькими начертаниями по ширине и хотите, чтобы браузер выбирал нужное (вместо того чтобы импортировать каждое начертание под отдельным именем
font-family). - Вы работаете с переменным шрифтом, который предоставляет ось ширины (
wdth) — процентные значения напрямую отображаются на эту ось.
Для обычного текста, где шрифт имеет только одну ширину, font-stretch ничего не делает, поэтому не рассчитывайте на него как на запасной способ вписать текст в блок.
Примечание: В последней спецификации CSS Fonts свойство
font-stretchбыло переименовано вfont-width. Браузеры по-прежнему принимаютfont-stretchкак псевдоним, поэтому имя свойства в этой главе остаётся действительным везде.
Значения
font-stretch принимает либо ключевое слово, либо процент. Каждое ключевое слово имеет эквивалентный процент:
| Ключевое слово | Процент |
|---|---|
| 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% |
Проценты дают более тонкий контроль: допустимо любое значение от 50% до 200%, а для переменного шрифта можно использовать промежуточные значения, например 90% или 133%. Значения ниже 100% дают более узкий текст; значения выше 100% — более широкий.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет |
| Анимируемое | Да. |
| Версия | CSS3 |
| DOM Syntax | object.style.fontStretch = "expanded"; |
Синтаксис
Синтаксис свойства CSS font-stretch
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;Пример свойства font-stretch
В примере ниже каждое ключевое слово применяется к одной и той же букве. Помните, что разница будет заметна только в том случае, если отображаемый шрифт (Myriad Pro здесь, с системным запасным вариантом) действительно предоставляет соответствующие начертания по ширине.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 4em;
font-family: 'Myriad Pro', sans-serif;
}
</style>
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">A</span>
<span style="font-stretch: extra-condensed">A</span>
<span style="font-stretch: condensed">A</span>
<span style="font-stretch: semi-condensed">A</span>
<span style="font-stretch: normal">A</span>
<span style="font-stretch: semi-expanded">A</span>
<span style="font-stretch: expanded">A</span>
<span style="font-stretch: extra-expanded">A</span>
<span style="font-stretch: ultra-expanded">A</span>
</p>
</body>
</html>Использование процента с переменным шрифтом
С переменным шрифтом, предоставляющим ось ширины, можно задать любое значение в диапазоне 50%–200%, включая промежуточные значения ширины:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: 'Roboto Flex', sans-serif;
font-size: 2em;
}
.narrow { font-stretch: 75%; }
.normal { font-stretch: 100%; }
.wide { font-stretch: 150%; }
</style>
</head>
<body>
<p class="narrow">Condensed text (75%)</p>
<p class="normal">Normal text (100%)</p>
<p class="wide">Expanded text (150%)</p>
</body>
</html>Как выбирается начертание
Начертание, выбираемое для заданного значения font-stretch, зависит от того, какие варианты ширины включены в шрифт. Если ни одно начертание не совпадает точно с запрошенным значением, браузер использует ближайшее: значения ниже 100% отображаются на ближайшее более узкое начертание, а значения от 100% и выше — на ближайшее более широкое.
Описание значений
| Значение | Описание |
|---|---|
| ultra-condensed | Максимально сужает текст (50%). |
| extra-condensed | Значительно сужает текст, но не так сильно, как ultra-condensed (62.5%). |
| condensed | Умеренно сужает текст, но не так сильно, как extra-condensed (75%). |
| semi-condensed | Незначительно сужает текст, но не так сильно, как condensed (87.5%). |
| normal | Альтернативное начертание не выбирается. Это значение по умолчанию (100%). |
| semi-expanded | Незначительно расширяет текст по сравнению с normal (112.5%). |
| expanded | Умеренно расширяет текст по сравнению с semi-expanded (125%). |
| extra-expanded | Значительно расширяет текст по сравнению с expanded (150%). |
| ultra-expanded | Максимально расширяет текст (200%). |
| 50% to 200% | Процент, представляющий коэффициент растяжения; ниже 100% — уже, выше — шире. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
- font-weight — выбирает толщину начертания шрифта.
- font-style — выбирает нормальное, курсивное или наклонное начертание.
- font-variant — управляет капителью и другими альтернативными глифами.
- font-family — задаёт используемый шрифт (и его начертания).
- font — сокращённая запись для задания нескольких свойств шрифта одновременно.