BlogsDope image BlogsDope

CSS font-stretch

June 8, 2017 CSS FONT 414

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+.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).