Css font stretch width

CSS font-stretch Property

The font-stretch property allows you to make text narrower (condensed) or wider (expanded).

Note: Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to select a normal, condensed, or expanded font face.

Note: This property has no effect if the selected font does not offer condensed or expanded faces!

Default value:	normal
Inherited:	yes
Animatable:	yes. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.fontStretch=»expanded»

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Syntax

Property Values

Value	Description
ultra-condensed	Makes the text as narrow as it gets
extra-condensed	Makes the text narrower than condensed, but not as narrow as ultra-condensed
condensed	Makes the text narrower than semi-condensed, but not as narrow as extra-condensed
semi-condensed	Makes the text narrower than normal, but not as narrow as condensed
normal	Default value. No font stretching
semi-expanded	Makes the text wider than normal, but not as wide as expanded
expanded	Makes the text wider than semi-expanded, but not as wide as extra-expanded
extra-expanded	Makes the text wider than expanded, but not as wide as ultra-expanded
ultra-expanded	Makes the text as wide as it gets
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Источник

font — stretch

Свойство для управления шириной букв для вариативных шрифтов.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство 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-stretch¶

Свойство font-stretch устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Демо¶

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* Keyword values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; /* Percentage values */ font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* Global values */ font-stretch: inherit; font-stretch: initial; font-stretch: revert; font-stretch: revert-layer; font-stretch: unset; 

Значения¶

Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.

Примечание¶

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use css-font-stretch? Data on support for the css-font-stretch feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

 html> head> meta charset="utf-8" /> title>font-stretchtitle> style> p  font-size: 5em; font-family: 'Myriad Pro'; > style> head> body> p> span style="font-stretch: ultra-condensed">Бspan> span style="font-stretch: extra-condensed">Бspan> span style="font-stretch: condensed">Бspan> span style="font-stretch: semi-condensed">Бspan> span style="font-stretch: normal">Бspan> span style="font-stretch: semi-expanded">Бspan> span style="font-stretch: expanded">Бspan> span style="font-stretch: extra-expanded">Бspan> span style="font-stretch: ultra-expanded">Бspan> p> body> html> 

Источник

font-stretch

The font-stretch CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face at-rule.

For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-stretch descriptor to explicitly specify the font face’s stretch. The values for the CSS descriptor is same as that of its corresponding font property.

Syntax

/* Single values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* multiple values */ font-stretch: 75% 125%; font-stretch: condensed ultra-condensed; 

The font-stretch property is described using any one of the values listed below.

Values

Specifies a normal font face.

semi-condensed , condensed , extra-condensed , ultra-condensed

Specifies a more condensed font face than normal, with ultra-condensed as the most condensed.

semi-expanded , expanded , extra-expanded , ultra-expanded

Specifies a more expanded font face than normal, with ultra-expanded as the most expanded.

In earlier versions of the font-stretch specification, the property accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a value as well. This enables variable fonts to offer something more like a continuum of character widths. For TrueType or OpenType variable fonts, the «wdth» variation is used to implement varying widths.

If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.

Keyword to numeric mapping

The table below shows the mapping between keyword values and numeric percentages:

Keyword	Percentage
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%

Variable fonts

Most fonts have a particular width which corresponds to one of the keyterm values. However some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. For this, percentage ranges are useful.

For TrueType or OpenType variable fonts, the «wdth» variation is used to implement varying glyph widths.

Accessibility concerns

People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio.

Formal definition

Formal syntax

Examples

Setting a percentage range for font-stretch

The following find a local Open Sans font or import it, and allow using the font for normal, semi-condensed and semi-expanded states.

@font-face  font-family: "Open Sans"; src: local("Open Sans") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник