CSS3 font-stretch Property

Here is the brief description on how to use the CSS3 font-stretch property.

Explanation

Property :

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


Where,
ultra-condensed - Makes the text as narrow as it gets
extra-condensed - Makes the text narrower than condensed, but not as narrow as ultra-condensed
condensed - Makes the text narrower than semi-condensed, but not as narrow as extra-condensed
semi-condensed - Makes the text narrower than normal, but not as narrow as condensed
normal - Default value. No font stretching
semi-expanded - Makes the text wider than normal, but not as wide as expanded
expanded - Makes the text wider than semi-expanded, but not as wide as extra-expanded
extra-expanded - Makes the text wider than expanded, but not as wide as ultra-expanded
ultra-expanded - Makes the text as wide as it gets
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


font-stretch: condensed;
font-stretch: expanded;
text-overflow: inherit;
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);

Definition:

The font-stretch property selects a normal, condensed, or expanded face from a font.

It takes the following values.
  • normal : Default value.Displays normal font.
  • ultra-condensed : Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • extra-condensed : Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • condensed : Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • semi-condensed : Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • semi-expanded : Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • expanded : Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • extra-expanded : Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • ultra-expanded : Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.

Example 1 :
<div style='font-stretch: expanded;' >This is example for font-stretch: expanded; property!!!</div>

Result:
This is example for font-stretch: expanded; property!!!


Example 2 :
<div style='font-stretch: condensed;' >This is example for font-stretch: condensed; property!!!</div>

Result:
This is example for font-stretch: condensed; property!!!



Ask Questions

Ask Question