CSS Typography The Font Shorthand
Example
With the syntax:
element {
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}
You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order.
For example, to make all p elements bold with a font size of 20px and using Arial as the font family typically you would code it as follows:
p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}
However with the font shorthand it can be condensed as follows:
p {
font: bold 20px Arial, sans-serif;
}
Note: that since font-style, font-variant, font-weight and line-height are optional, the three of them are skipped in this example. It is important to note that using the shortcut resets the other attributes not given. Another important point is that the two necessary attributes for the font shortcut to work are font-size and font-family. If they are not both included the shortcut is ignored.
Initial value for each of the properties:
font-style: normal;font-variant: normal;font-weight: normal;font-stretch: normal;font-size: medium;line-height: normal;font-family– depends on user agent
