Call (877) SITE-OPT (748-3678)

Code: Font shorthand property

From Chapter 7: CSS Optimization

The font property is a shorthand property for setting the font-style, font-variant, font-weight, font-size, line-height, and font-family properties, all in one abbreviated notation. You should set font-stretch and fontsize-adjust with their individual properties. The syntax of the font: shorthand property is as follows:

font: <font-style> <font-variant> <font-weight> <font-size> / <line-height> <fontfamily>

The font-size and font-family are required properties, whereas the other properties will revert to their defaults if they are missing. Here is a minimalist example:

p { font: 0.9em serif; }

This CSS rule sets all paragraph text to 90% of the current font size with the default serif font family. A more complete example utilizing the entire font property follows:

p { font: italic small-caps bold 0.9em/110% "new century schoolbook", serif; }

To abbreviate a longhand declaration:

.errormsg {
    font-size: 12px; color: #ff0000; font-family: arial, helvetica, sans-serif;
    font-weight: bold;

do this, using the shorthand font: notation:

.errormsg {
    font:bold 12px arial,helvetica,sans-serif;color:#f00;

Note that you can change the order in which some properties appear. Most browsers will allow this. However, to avoid any problems with current or future browsers that may be stricter in their interpretation, it is a best practice to supply the properties in the order that the W3C lists them in the specification.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In