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.
CSS
font-stretch: 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.
ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded
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+.