The font-stretch property makes text characters wider or narrower than the font.s default character width.
ultra-condensed − The text characters in the element will be narrowed extremely.
extra-condensed − The text characters in the element will be narrowed significantly.
condensed − The text characters in the element will be narrowed, more so than if the value were semi-condensed.
semi-condensed − The text characters in the element will be slightly narrowed, making them narrower than if the value were normal.
normal − The text characters in the element are of normal width.
semi-expanded − The text characters in the element will be slightly widened, making them wider than if the value were normal.
expanded − The text characters in the element will be widened, making them wider than if the value were semi-expanded.
extra-expanded − The text characters in the element will be widened greatly, making them wider than if the value were expanded.
ultra-expanded − The text characters in the element will be widened extremely, making them wider than if the value were extra-expanded.
wider − The width of text characters in the element will be wider than those of their parent element.
narrower − The width of text characters in the element will be narrower than those of their parent element.
All the HTML elements.
object.style.fontStretch = "expanded";
Here is the example 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>
This will produce following result −