CSS - font-stretch



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

Note: If the font face you are using does not support condensed or expanded forms, the font-stretch property will have no effect.

Possible Values

  • normal: Specifies a normal font face.

  • semi-condensed, condensed, extra-condensed, ultra-condensed: Specifies a condensed font face than normal.

  • semi-expanded, expanded, extra-expanded, ultra-expanded: Specifies an expanded font face than normal.

  • <percentage>: A percentage value, which can be 50% to 200%.

  • initial: Sets the value to initial value.

  • inherit: Inherits the value from the parent value.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontStretch = "expanded";

CSS font-stretch - Basic Example

Here is an example:

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
   }
</style>
</head>
<body>
   <h2>Font-stretch</h2>
   <p style = "font-stretch: normal;">
      Normal
   </p>
   <p style = "font-stretch: condensed;">
      Condensed
   </p>
   <p style = "font-stretch: expanded;">
      Expanded
   </p>
   <p style = "font-stretch: 170%;">
      170% stretched
   </p>
</body>
</html>
Advertisements