CSS - font



CSS allows a shorthand property for font where all the following properties can be specified in one single declaration:

The font property is a shorthand property used to affect the rendering of text.

Possible Values

Possible values will depend on how we are using this property.

  • <font-style>: Specifies the font style (normal, italic, or oblique).

  • <font-variant>: Specifies the font variant (normal or small-caps).

  • <font-weight>: Specifies the font weight (normal, bold, or a specific value).

  • <font-size>: Specifies the size of the font. Example values: 12px, 1rem, 100%

  • <font-family>: Specifies the font family or multiple font families to be used. Example values: Arial, Verdana, Geneva, sans-serif, "Times New Roman".

  • <line-height>: Specifies the height of each line of text. Example values: normal, 1.5, 200%.

  • <font-stretch>: Specifies the font stretch (normal, condensed, or expanded).

Applies to

All the HTML elements.

DOM Syntax

object.style.font = "normal oblique small-caps 250%/1.2 sans-serif";

CSS Font - Basic Example

Here is the example using shorthand font property −

<html>
   <head>
     <style>
           p {
               border: 5px solid;
               padding: 5px;
           }
     </style> 
   </head>
   <body>
         <h2>Shorthand for font</h2>
            <p style = "font: italic normal bold 20px Arial, sans-serif;">
                  Font Shorthand
            </p>
   </body>
</html>
Advertisements