font-stretch property
Specifies a value that indicates a normal, condensed, or expanded face of a font family.
 |
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 To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value | depends on user agent |
Standards information
- Scalable Vector Graphics: Text, Section 10.10
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:
See also
