in CSS3

Font shorthand properties in css

Font Shorthand

What is Font shorthand?

This topic deals with how to write Font Shorthand in CSS. To style text, we used to specify different properties in single, different lines. Now, all that presentational information can be placed in one CSS document. Each command listed just once. Font shorthand property sets all the font properties in one declaration. With one line of css, we can add the font properties.

Advantages of using font shorthand?

* One of the main advantages of using CSS font shorthand is reduction in web page download/load time.
* Using CSS font shorthand will reduce number of css lines.

The properties for font that can be set, are (in order): “font-style font-variant font-weight font-size/line-height font-family”

The font-size and font-family values are required. If one of the other value is missing, the default values will be inserted, if any.

How to write font shorthand CSS?

For using font shorthand, we should know the default font properties.

Default Font Properties

The default properties of font are the following.

.classname {
   font-style: normal , italic , oblique;font-variant:normal , small-caps;
   font-weight: normal , bold , bolder , lighter, (100-900);
   font-size: number+unit ;
   line-height: normal ,number+unit ;
   font-family: font-name,"more names";
}

Default Font Property Values

.classname {
   font-style: normal;font-variant:normal;
   font-weight: normal;
   font-size: inherit;
   line-height: normal;
   font-family:inherit;
}

We will add the properties in one line or the font shorthand we use. So the font shorthand property syntax will be like the following:

The Font Shorthand Property

.classname {
   font:normal
        normal
        normal
        inhert/
        normal
        inherit;
}

Example for Font Shorthand Property

.classname {
    font:bold 1em/1.2em Arial,"times new roman",serif;
}

This CSS Font shorthand version will work only if we specify both font-size and the font-family. The font-family command must always be at the end of the font shorthand command. The font-size must come directly before this. If you don’t specify the font-weight, font-style or font-variant, then the default values will be applied.

So, start using font shorthand, reduce the number of lines in css files and increase the page load speed.

The same way, we can use short hand properties for background, padding, margin, border-radius etc..

Related Posts

Written By:

Add a Comment

Your email address will not be published. Required fields are marked *