CSS font shorthand property

Posted in Tutorials

Here is an example of a CSS font shorthand property …

font: italic small-caps bold 16px/1.2em Arial, Helvetica, sans-serif;

In the full context, here it is styling the body element …

The font property should be in this order …

font-style
font-variant
font-weight
font-size/line-height
font-family

So the above rule is equivalent to …

When using font shorthand property, you need to make sure you include the font-size and the font-family otherwise the entire line is invalidated.  For example, at minimum, you need …

font: 26px sans-serif;

The other values are optional.

The exception to that is that you can use …

font: caption;
font: small-caption;
font: icon;
font: menu;
font: message-box;
font: status-bar;

These sets the font to be like the system font used by those elements.

Note that if you have CSS overrides, the  font line will override the entire font line.  Consider this case …

It will not just override the properties found in the second line.  In other words, the <p> will no longer have the italics and small-caps.  Because “font-style” was omitted in the second font line, the font-style defaulted to “normal”.

The possible values for “font-style” are “normal” (default), “italic”, “oblique”, and “inherit”.

The possible values for “font-variant” are “normal” (default), “small-caps”, and “inherit”.

The possible values for “font-weight” are “normal”, “bold”, “bolder”, “lighter”, “inherit”, and 100, 200, 300, 400, 500, 600, 700, 800, 900.

 

 

 

 

---