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.
p {
font-stretch: ultra-condensed;
}
font-stretch accepts one of the following values:
ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-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.
Related Properties
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| none | none | 9+ | none | 9+ | none | none |
Share
Tweet
Email
Leave a Reply