CSS font-stretch attribute

Definition and Usage

The font-stretch attribute can distort the current font-family to make it stretch or shrink.

See Also:

CSS Tutorial:CSS Font

CSS Reference Manual:CSS font attribute

HTML DOM Reference Manual:fontStretch Attribute

Example

Sets the font-stretch attribute of the HTML element:

h1
  
  font-stretch:ultra-condensed;

CSS Syntax

font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;

Property Value

Value Description
normal Default Value. Sets the scaling ratio to standard.
wider Sets the expand ratio to an even wider value
narrower Sets the shrink ratio to an even narrower value
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Sets the scaling ratio of the font-family.

"ultra-condensed" is the widest value, and "ultra-expanded" is the narrowest value.

Technical Details

Default Value: normal
Inheritance: yes
Version: CSS2
JavaScript Syntax: object.style.fontStretch="ultra-expanded"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
48.0 9.0 9.0 11.0 35.0