font-stretch в CSS


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

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

Синтаксис:

Стоимость недвижимости:

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

свойство font-stretchCSS3-генератор ☛

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

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

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

Пример

Объектная модель

Примечание

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

Спецификация ?

Спецификация Статус
CSS Fonts Module Level 3 Возможная рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
9 9
Android Firefox Mobile Opera Mobile Safari Mobile
9

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

CSS font-stretch

The CSS font-stretch property selects a normal, condensed, or expanded face from a font family.


If your browser supports the font-stretch property the sample text from the above example should look similar to this:

Roboto and Roboto Condensed.

Also check out the font-stretch descriptor for a more detailed explanation of this example.

It is important to note that the font-stretch property does not actually stretch the font. It simply chooses the appropriate face from a font family. When a face does not exist for a given width, normal or condensed values map to a narrower face, otherwise a wider face. Conversely, expanded values map to a wider face, otherwise a narrower face.

Note that the font-stretch property was initially introduced in CSS 2, removed in CSS 2.1, but then re-introduced in CSS3.

Syntax

Possible Values

Any one of following absolute keywords can be used with the font-stretch property:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

CSS2 also defined the wider and narrower relative keywords, but these are not in the CSS3 spec.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

The CSS Font-Stretch Property

Contents

How to make a CSS font stretch?

By using the CSS font-stretch property, you can define whether you want your font to be wider or narrower:

Theory is great, but we recommend digging deeper!
Responsive Web Design Course: Learn How to Make a Responsive Website

BitDegree Foundation VSI ©

Syntax and property values

The CSS font-stretch property only requires defining one value:

In the table below, you can find all the keywords you can use as values for a CSS font stretch.

font-stretch

Easily manage projects with monday.com

The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font.

In order to use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes.

font-stretch accepts one of the following values:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

If a particular font does not have all the faces represented, any value used will map to the closest equivalent face. Normal or condensed values will map to a narrower font and expanded values will map to a wider face, or else the nearest narrower face.

In supporting browsers, font-stretch can be used as part of the font shorthand property.

CSS3 font-stretch Property

Description

The font-stretch CSS property selects a normal, condensed, or expanded face from a font.


The following table summarizes the usages context and the version history of this property.

Default value: normal
Applies to:
Inherited: Yes
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit

The example below shows the font-stretch property in action.

Example

Property Values

The following table describes the values of this property.

Value Description
normal Specifies a normal font face. This is default value.
ultra-condensed Specifies the most condensed font face.
extra-condensed Specifies the second most condensed font face.
condensed Specifies a condensed font face
semi-condensed Specifies a slightly condensed font face.
semi-expanded Specifies a slightly expanded font face.
expanded Specifies an expanded font face.
extra-expanded Specifies the second most expanded font face.
ultra-expanded Specifies the most expanded font face.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element font-stretch property.

Browser Compatibility

The font-stretch property is not supported in most of the browsers.

Basic Support—

  • Firefox 9+
  • Google Chrome ×
  • Internet Explorer 9+
  • Apple Safari ×
  • Opera ×

Warning: The font-stretch property is currently not supported by the Chrome, Safari and Opera browsers. You should better avoid using this property.

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

Пример

Сделать текст элементов div шире:

div
<
font-stretch: expanded;
>

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

Ни один из основных браузеров не поддерживает свойство font-stretch.

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

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

Замечание: Работает только с семейством шрифта, для которого указано значение растяжения шрифта.

font-stretch

The font-stretch property selects a normal, condensed, or expanded face from a font.

This property does not change the geometry of an arbitrary font by stretching or shrinking it. Like font-feature-settings or font-variant , it is merely a means to choose the most appropriate face of the font, if this one offers several of them.

Note: If the font provides several faces, the one fitting the best with the value of the font-stretch property is chosen. E.g. On OS X, in addition to the more common Bold, Regular, Italic, and BoldItalic faces, the «Helvetica Neue» font proposes a second set of faces with condensed, that is shrunk, characters: Condensed. Browsers supporting font-stretch will use the condensed faces for the value ultra-condensed to semi-condensed and the normal faces for the other ( normal and all expanded values).


If the font has no condensed or expanded faces, like the default «Times New Roman» on Mac OS, font-stretch will not have any visible effect as the only suitable face will be used in all cases.:

Initial value normal
Applies to all elements. It also applies to ::first-letter and ::first-line .
Inherited yes
Media visual
Computed value as specified
Animation type a font stretch
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Values

Interpolation

Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.

Formal syntax

Example

Result

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of ‘font-stretch’ in that specification.
Candidate Recommendation Initial definition

The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

CSS font-stretch

The font-stretch property is used to expand or contract text horizontally. It selects a normal, expanded or condensed face from a font family. It is a shorthand property of font .

Not all font families have different faces which match the values of the font-stretch property listed below. This property will work only when the font family has the face which matches the desired value.

This property is not supported by majority of browsers. Also, the font family that you choose is another deciding factor for this property to work.

Values

It can take the following nine values.

In the above list of values, normal specifies a normal font face. The values listed above it specifies a more condensed font face, the topmost being the most condensed. Similarly, the values listed below normal specifies an expanded font with the lowest value being the most expanded.

If a value does not have a face representing it in the font family used, then the result is rounded to the nearest value, preferably a more expanded one.

Browser Support

Only a few browsers support the font-stretch property, which include Firefox 9+ and IE 9+.

Can I stretch text using CSS?

Can I stretch text in CSS? I don’t want the font to be bigger, because that makes it appear bolder than smaller text beside it. I just want to stretch the text vertically so it’s kind of deformed. This would be in one div, and then the normal text beside it would be in another div. How can I do this?

6 Answers 6

Yes, you can actually with CSS 2D Transforms. This is supported in almost all modern browsers, including IE9+. Here’s an example.

HTML

CSS

TIP: You may need to add margin to your stretched text to prevent text collisions.

tags to . The style will affect anything in span tags with a «stretch» class. – Timothy Perez Sep 17 ’12 at 17:53

I’ll answer for horizontal stretching of text, since the vertical is the easy part — just use «transform: scaleY()»

letter-spacing just adds space between letters, stretches nothing, but it’s kinda relative

inline-block because inline elements are too restrictive and the code below wouldn’t work otherwise

Now the combination that makes the difference

font-size to get to the size we want — that way the text will really be of the length it’s supposed to be and the text before and after it will appear next to it (scaleX is just for show, the browser still sees the element at its original size when positioning other elements).

scaleY to reduce the height of the text, so that it’s the same as the text beside it.

transform-origin to make the text scale from the top of the line.

margin-bottom set to a negative value, so that the next line will not be far below — preferably percentage, so that we won’t change the line-height property. vertical-align set to top, to prevent the text before or after from floating to other heights (since the stretched text has a real size of 32px)

— The simple span element has a font-size, only as a reference.

The question asked for a way to prevent the boldness of the text caused by the stretch and I still haven’t given one, BUT the font-weight property has more values than just normal and bold.

I know, you just can’t see that, but if you search for the appropriate fonts, you can use the more values.

Илон Маск рекомендует:  writing-mode в CSS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL