Export (0) Print
Expand All
1 out of 1 rated this helpful - Rate this topic

font-stretch property

Specifies a value that indicates a normal, condensed, or expanded face of a font family.

Scalable Vector Graphics: Text, Section 10.10Internet Explorer 9

Syntax

font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

Property values

normal

Default. Indicates the face is neither condensed nor expanded.

wider

Indicates a wider value relative to the width of the parent element.

narrower

Indicates a narrower value relative to the width of the parent element.

ultra-condensed

Indicates the most condensed font face.

extra-condensed

Indicates the second most condensed font face.

condensed

Indicates a condensed font face.

semi-condensed

Indicates a slightly condensed font face.

semi-expanded

Indicates a slightly expanded font face.

expanded

Indicates an expanded font face.

extra-expanded

Indicates the second most expanded font face.

ultra-expanded

Indicates the most expanded font face.

inherit

Indicates that the property takes the same computed value as the property for the element's parent.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Valuedepends on user agent

Standards information

Remarks

Absolute keyword values have the following order, from narrowest to widest:

  • Ultra condensed
  • Extra condensed
  • Condensed
  • Semi condensed
  • Normal
  • Semi expanded
  • Expanded
  • Extra expanded
  • Ultra expanded

The scale is relative, so a font face that has a font-stretch value higher in the previous list above should never appear wider. When a font face does not exist for a given width, normal or condensed values map to a narrower font face. Otherwise, they map to a wider font face. Conversely, expanded values map to a wider font face; otherwise, a narrower face.

Examples

This example displays text with the default body element font-stretch setting (normal), then uses font-stretch to display condensed text.


body {
  font-family: sans-serif;
}
.condensedFont {
  font-stretch: condensed;
}


<body>
  <p>Lorem ipsum dolor sit amet... (font-stretch: normal (default))</p>
  <p class="condensedFont">Lorem ipsum dolor sit amet... (font-stretch: condensed)</p>
</body>

The following image shows the result:

An image showing text with different font-stretch settings.

See also

CSSStyleDeclaration
currentStyle
defaults
LayoutRect
runtimeStyle
style
font

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.