Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS Stretch And Condense Fonts With font-stretch

Tuesday, August 13, 2019

CSS Stretch And Condense Fonts With font-stretch

One descriptor of the font property in CSS is the font-stretch descriptor.  This descriptor widens and narrows a font family that has width-variant faces.

The values for widening and narrowing fonts are the following:

  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
The way you define a font-stretch is the following

      p.uc {font-family: Verdana; font-stretch: ultra-condensed;}


This is how you would use it in your HTML markup

     <p class="uc">Verdana Font ultra-condensed</p>




















Here is the entire HTML markup:

<html>
    <head>
        <style>
            p.uc {font-family: Verdana; font-stretch: ultra-condensed;}
            p.ec {font-family: Verdana; font-stretch: extra-condensed;}
            p.c {font-family: Verdana; font-stretch: condensed;}
            p.sc {font-family: Verdana; font-stretch: semi-condensed;}
            p.se {font-family: Verdana; font-stretch: semi-expanded;}
            p.e {font-family: Verdana; font-stretch: expanded;}
            p.ee {font-family: Verdana; font-stretch: extra-expanded;}
            p.ue {font-family: Verdana; font-stretch: ultra-expanded;}
        </style>
    </head>
    <body>
        <p class="uc">Verdana Font ultra-condensed</p>
        <p class="ec">Verdana Font extra-condensed</p>
        <p class="c">Verdana Font condensed</p>
        <p class="sc">Verdana Font semi-condensed</p>
        <p class="se">Verdana Font semi-expanded</p>
        <p class="e">Verdana Font expanded</p>
        <p class="ee">Verdana Font extra-expanded</p>
        <p class="ue">Verdana Font ultra-expanded</p>
    </body>
</html>

Previous: CSS: Use @font-face To Use Custom Fonts

1 comment:

Subscribe to: Post Comments (Atom)

Search This Blog