CSS - font-stretch

Advertisements

Previous Page
Next Page  

Description

The font-stretch property makes text characters wider or narrower than the font.s default character width.

Possible Values

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

Applies to

All the HTML elements.

DOM Syntax

object.style.fontStretch = "expanded";

Example

Here is the example using this property −

Live Demo 
<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 −

Advertisements