Web Design in a Nutshell, 3rd Edition

When using the font property as shorthand for a number of font properties, the order in which the property values appear is important. All of these font rules show correct usage of the font property.

    h1 { font: 1.75em sans-serif; } /* minimum value list for font */
    h1 { font: 1.75em/2 sans-serif; }
    h1 { font: bold 1.75em sans-serif; }
    h1 { font: oblique bold small-caps 1.75em Verdana, Arial, sans-serif; }

The rule may include values for all of the properties or a subset, but it must include font-size and font-family, in that order, as the last two properties in the list. Omitting one or putting them in the wrong order causes the entire rule to be invalid. These examples are invalid:

    h1 { font: sans-serif; } /* font-size omitted */
    h1 { font: 1.75em/2 sans-serif oblique; } /* size and family come first */

Once you’ve met the font-size and font-family requirement, the rule may also include optional font-style, font-variant, or font-weight properties at the beginning of the rule. They may appear in any order, as long as they precede font-size. Another optional value is the line-height property (for adding space between lines) that appears just after font-size, separated by a slash (/), as shown here:

    p { font: italic 12px/18px Georgia, Times, Serif }

It is important to know that when you use the shorthand font property, any property that is omitted will be reset to the initial setting (default) for that property. Be aware that an incomplete shorthand rule could accidentally override ...