CSS font-stretch

The CSS font-stretch property is used when we need to define condensed or expanded face from a font. For example:

HTML with CSS Code
<!DOCTYPE html>
      #myd{font-family: 'Courier New', Courier, monospace;
         font-stretch: expanded;}

   <div id="myd">
      <h2>The font-stretch Property</h2>
      <p>This is an example of font-stretch property in CSS.</p>

The font-stretch Property

This is an example of font-stretch property in CSS.

CSS font-stretch Syntax

The syntax of font-stretch property in CSS, is:

font-stretch: x;

The value of x should be any of the following:

Important - The font-stretch property does not works on those fonts that does not offer condensed and/or expanded faces.

The table given below equates all the keywords that can be used to define font-stretch, with percentage:

ultra-expanded 200%
extra-expanded 150%
expanded 125%
semi-expanded 112.5%
normal 100%
semi-condensed 87.5%
condensed 75%
extra-condensed 62.5%
ultra-condensed 50%

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!