CSS font-stretch property
CSS font-stretch property
Description
The font-stretch property makes text characters wider or narrower than the default character width.
Possible values
- ultra-condensed – The text characters within the element will be extremely narrowed.
-
extra-condensed – The text characters within the element will be significantly narrowed.
-
condensed – The text characters within the element will be narrower than the semi-condensed value.
-
semi-condensed – The text characters within the element will be slightly narrowed, making them narrower than normal.
-
normal – The text characters within the element will be normal width.
-
semi-expanded – The text characters within the element will be slightly widened, making them wider than normal.
-
expanded – The text characters within the element will be widened, making them wider than the semi-expanded value.
-
extra-expanded – The text characters within the element will be greatly widened, making them wider than the expanded value.
-
ultra-expanded – Text characters within the element are extremely widened, making them wider than their specially expanded value.
-
wider – The width of text characters within the element will be wider than the width of its parent element.
-
narrower – The width of text characters within the element will be narrower than the width of its parent element.
Applies to
All HTML elements.
DOM Syntax
object.style.fontStretch = "expanded";
Example
Here is an example of using this property:
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>
Here are the results produced –
