We now have a youtube channel. Subscribe!

Css Fonts


Hello dear readers! welcome back to another section of my tutorial on Css. Hope you have all learned alot so far from my tutorials? In this tutorial post, we are going to be studying about the Css Fonts.

This section teaches you how to set fonts of a content, available in a HTML element. You can set the following font properties of an element:
  • The font-family property is used to change the face of a font.
  • The font-style property is used to make a font italic or oblique.
  • The font-variant property is used to create a small-caps effect.
  • The font-weight property is used to increase or decrease how bold or light a font can appear
  • The font-size property is used to increase or decrease the size of a font.
  • The font property is used as shorthand for specifying a number of some other font properties.

Set the Font Family

Following is the example which shows how to set the font family of an element. Possible values could be any font family name.

<html>
     <head>
     </head>

     <body>
            <p  style="font-family: georgia, garamond;">  
                  This text is rendered in either georgia, garamond, or the default.   
            </p>
     </body>
</html>

Set the Font Style

The following example shows how to set the font style of an element. Possible values are normal, italic and oblique.

<html>
     <head>
     </head>

     <body>
            <p  style="font-style: normal;">  
                  This text is rendered in normal style.
           </p>
     </body>
</html>

Set the Font Variant

The following example shows how to set the font variant of an element. Possible values are normal and small-caps.

<html>
     <head>
     </head>

     <body>
            <p  style="font-variant: small-caps;">  
                  This text is rendered as small caps.
            </p>
     </body>
</html>

RECOMMENDED: Html Frames

Set the Font Weight

The following example shows how to set the font weight of an element. The font weight property provides the functionality to specify how bold a font should be.

Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<html>
     <head>
     </head>

     <body>
            <p  style="font-weight: bold;">  
                  This font is bold.
            </p>


            <p  style="font-weight: bolder;">  
                  This font is bolder.
            </p>


            <p  style="font-weight: 700;">  
                  This font is 700 weight.
            </p>
     </body>
</html>

Set the Font Size

The following example shows how to set a font size of an element. The font size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.

<html>
     <head>
     </head>

     <body>
            <p  style="font-size: 15px;">  
                  This font size is 15 pixels.
            </p>


            <p  style="font-size: small;">  
                  This font size is small.
            </p>


            <p  style="font-size: large;">  
                  This font size is large.
            </p>
     </body>
</html>

RECOMMENDED: Html Iframes

Set the Font Size Adjust

The following example shows how to set the font size adjust of an element. The property enables you to adjust the x-height to make fonts more legible. Possible values could be any number.

<html>
     <head>
     </head>

     <body>
            <p  style="font-size-adjust: 0.80;">  
                  This text is using a font size adjust value.
            </p>
     </body>
</html>

Set the Font Stretch

The following example shows how to set the font stretch of an element. The property relies on the user's computer to have an expanded or condensed version of the font being used.

Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, expanded, extra-expanded, ultra-expanded.

<html>
     <head>
     </head>

     <body>
            <p  style="font-stretch: expanded;">  
                  If this doesn't appear to work, it is likely that your computer doesn't      
                  have a condensed or expanded version of the font being used.
            </p>
     </body>
</html>

RECOMMENDED: Html-Text Links

Shorthand Property

You can use the font property to set all the font properties at once. For example:

<html>
     <head>
     </head>

     <body>
            <p  style="font: italic  small-caps  bold  17px  georgia;">       
                  Applying all properties on text at once.
            </p>
     </body>
</html>

Alright guys that's it for this tutorial on Cascading Style Sheets Fonts, like our facebook page and also subscribe with us, bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain