Definition and Usage
The font-stretch CSS 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 mean 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 Mac OS, 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 shrinked, 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 normal
- Applies to all elements
- Inherited yes
- Media visual
- Computed Value as specified
- Animatable yes, as a font stretch
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
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: inherit
Values
- normal
- Specifies a normal font face.
- semi-condensed, condensed, extra-condensed, ultra-condensed
- Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.
- semi-expanded, expanded, extra-expanded, ultra-expanded
- Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.
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.
Examples
h1 { font-stretch: extra-expanded }
p { font-stretch: condensed }
Compatibility
Desktop browsers
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | Not supported | 9.0 (9.0) | 9.0 | Not supported | Not supported |
Mobile browsers
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | Not supported | 9.0 (9.0) | NA | Not supported | Not supported |
