Tuesday, September 14, 2010

CSS shorthand for font properties

The CSS properties discussed so far can be written in shorthand, enabling you to cut down
on space and manage your CSS font settings with greater ease. Like some other shorthand
properties, some rules apply:
Some browsers are more forgiving than others regarding required and optional
values, but you should always specify the font-size and font-family values, in
that order.
Omitted values revert to default settings.
The font-style, font-weight, and font-variant values, if included, should be
placed at the start of the rule (in any order), prior to the font-size value.
The font-size and line-height values can be combined using the syntax
font-size/line-height (e.g., 12px/16px for 12px font-size and 16px
line-height).
A complete font declaration in shorthand could therefore look like this:
p {
font: italic small-caps bold 100%/1.3em Arial, Helvetica,
å sans-serif;
}
The equivalent in longhand is the following:
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 1.3em;
font-family: Arial, Helvetica, sans-serif;
}
As you can see, this is rather weightier!
An invalid font declaration is shown in the following code block. Here, the font-weight
value (bold) is incorrectly placed after the font-family value, and the font-size value is
missing.
p.invalid {
font: Arial, Helvetica, sans-serif bold;
}

No comments:

Post a Comment