Home » CSS 3 » Font Shorthand

Font Shorthand

What is font shorthand?

This topic deals with how to write font shorthand. Using CSS shorthand will reduce the number of css lines. One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once. Font shorthand property sets all the font properties in one declaration.

Font Shorthand: The properties 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 values are missing, the default values will be inserted, if any.

How to write font shorthand CSS

DEFAULT FONT PROPERTIES

The 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 ARE

.classname {font-style: normal;

font-variant:normal;

font-weight: normal;

font-size: inherit;

line-height: normal;

font-family:inherit;

}

So the font shorthand property syntax will be like this:

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 shorthand version will only work if we’re specifying both the font-size and the font-family. The font-family command must always be at the end of this shorthand command, and font-size must come directly before this. Also, if you don’t specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.

Leave a Reply

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

*
*