CSS font-stretch property is used to set the expended or condensed face of a font.
It is to be noted that the font family you are using might not have expanded or condensed face of fonts. In this situation, the font-stretch property has no effect.
Example:
.p1{
font-family: Arial, Helvetica, sans-serif;
font-stretch: condensed;
}
CSS Syntax
The font-stretch property has the following syntax:
font-stretch: normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;
Property Values
The font-stretch property accepts the following values:
| normal | This is the default value. The fonts are displayed normally without any stretching. |
| ultra-condensed | Specifies the most condensed face of fonts. |
| extra-condensed | Fonts are condensed more than condensed face but less than ultra-condensed. |
| condensed | Specifies the condensed face of fonts. |
| semi-condensed | Fonts are slightly condensed. |
| semi-expanded | Fonts are slightly expanded. |
| expanded | Specifies the expanded face of fonts. |
| extra-expanded | Fonts are slightly more stretched than an expanded face. |
| ultra-expanded | Specifies the most expanded face of fonts. |
| initial | Sets the font-stretch property to its default value(normal). |
| inherit | Inherits the font-stretch property from the parent element. |
General Info
| Default Value | normal |
| Inherited | Yes |
| JavaScript Usage | element.style.fontStretch = “condensed”; |
