CSS font shorthand syntax
Posted on January 11, 2008. 8 comments.
The CSS font shorthand property syntax always seem to slip my mind, so here it is, mostly for my own benefit.
Syntax
The syntax is:
font: style variant weight size/line-height family;
The required parts of this shorthand is size and family. You should always stick with the ordering given above, which is what the W3C recommends.
Examples
Example 1:
font-size: 14px;
font-family: Helvetica, sans-serif;
/* Combined into one shorthand rule */
font: 14px Helvetica, sans-serif;
Example 2:
font-weight: bold;
font-size: 14px;
line-height: 1.5;
font-family: Helvetica, sans-serif;
/* Combined into one shorthand rule */
font: bold 14px/1.5 Helvetica, sans-serif;
Example 3:
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: Helvetica, sans-serif;
/* Combined into one shorthand rule */
font: italic small-caps bold 1em/140% Helvetica, sans-serif;
Source: 456 Berea Street on shorthand properties. (You’ll find many more timesavers in that article.)
8 comments
Anders-Meyer Eldøy says:
Is this compatible with all browsers?
I have experienced various troubles when using the background: shorthand syntax.
Anders-Meyer Eldøy says:
Is this compatible with all browsers?
I have experienced various troubles when using the background: shorthand syntax.
sftco says:
ya sometimes they give prob with IE 6 , but work well with ff and ie 7
porov99 says:
Thanks for that, i had forgotted how to use the shorthand as well. It can save a lot of space, and also size. I had a css file that was something like 10kb when i cleaned it up a little it became less than 6kb
Eduard says:
I really enjoyed reading all of your posts.
dıs cephe says:
thanks friends..
hekimboard says:
thanks dıs cephe and hekimboard.
jos says:
This works in firefox and opera, really nice