CSS font PropertyS2C Home « CSS font Property
Definition
The CSS font property allows us to combine the other CSS font properties into one handy shorthand property. So we can combine font-style, font-variant, font-weight, font-size, line-height and font-family in one place. This can save a lot of typing and makes our styles easier to read, but we must follow a few basic rules when using this property.
- The font-size and font-family are mandatory options.
- Property values are seperated by spaces.
- Seperate fonts using commas.
- When specifying the line-height add a slash after the font-size property.
- The last two properties must be font-size or font-size/line-height followed by font-family.
- All other properties can be written in any order before the last two properties mentioned above.
Applies To
All elements.
Property Values
inherit - The font properties are inherited from the parent element.
Property values are the same as those set for the individual font properties.
There are also additional system fonts available when using the CSS font property. When using system fonts all the font properties must be initialized together, although they can be changed individually after initialisation.
The available system fonts are :-.
caption - This system font is used for drop-downs, buttons and such.
icons - This system font is used for icons.
menu - This system font is used for drop-down menus and menu lists.
message-box - This system font is used for dialog boxes.
status-bar - This system font is used for status bars.
Default Value
When using the CSS font property, font related properties are set to their initial values, see individual properties for default settings. Those properties that are then set in the CSS font property, will have their defaults overwritten.
Inheritance
The font properties are inherited from the parent element if none are applied to the current element.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS font property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS font Property</title>
<style type="text/css">
/* Body font family to Times New Roman to show inheritance */
body {
font: 1.6em "Times New Roman";
}
/* h1 headings all font set to show shorthand */
h1 {
font: italic bold small-caps 1.8em/200% Arial;
}
/* h2 headings font family set to inherit (inherits from parent element) */
h2 {
font: inherit;
}
/* h3 headings font family selection seperated by commas */
h3 {
font: 0.8em Georgia, Times, serif;
}
/* Paragraph font size set to 0.3em, line height to 150%, font family set to fantasy */
p {
font: 0.5em/150% fantasy;
}
</style>
</head>
<body>
<h1>H1 Headings Set With our font shortcuts</h1>
<h2>H2 Headings Inherit From Body Element
So Font Family Will Be Set To Times New Roman </h2>
<p>Paragraph with a small fantasy font.
This has been set with larger than normal line heights.</p>
<h3>H3 Font Family offers a selection of serif fonts</h3>
</body>
</html>
How It Looks
The results of using the font property with the values above will look something like the following:
Homepage
Top