You are here: Reference > CSS > properties > font

font property

Browser support:
Specifies up to six separate font properties, in a shorthand form.
The font property allows you to specify what kind of letter is used for the visual representation of the element. You can change the style, weight, size, the font family, and more, but if you want to change the color of the text, you must use the color property.
Specifying more than one font-family is recommended, because different font family names are supported by different platforms. For details, see the page for the font-family property. These features can be set with six different style properties too, listed below. The use of separate properties is highly recommended for non-advanced authors for better controllability.
JavaScript page for this property: font. You can find other example(s) there.

Possible values:

 One of the following values: 
 Values in this order (use the space character to separate them): 
1.
 Any of the following values (use the space character to separate them, each value can be used only once): 
<font-style>
<font-variant>
<font-weight>
possible but not necessary; left to personal choice
2.
 Values in this order (use the / character to separate them): 
1. <font-size>
2.
<line-height> possible but not necessary; left to personal choice
3. <font-family>
caption
icon
menu
message-box
small-caption
status-bar
-moz-button
-moz-info
-moz-desktop
-moz-dialog
-moz-document
-moz-workspace
-moz-window
-moz-list
-moz-pull-down-menu
-moz-field
-webkit-control
-webkit-mini-control
-webkit-small-control
inherit

Description of values:

-moz-button
The font used in buttons.
-moz-desktop
The font used on the desktop.
-moz-dialog
The font used in dialogs.
-moz-document
The font used in documents.
-moz-field
The font used in fields.
-moz-info
The font used in info.
-moz-list
The font used in lists.
-moz-pull-down-menu
The font used in pull-down-menus.
-moz-window
The font used in windows.
-moz-workspace
The font used in workspaces.
-webkit-control
The font used in controls.
-webkit-mini-control
The font used in mini controls.
-webkit-small-control
The font used in small controls.
caption
The font used for objects that have captions.
font-family
Specifies the font face for text.
font-size
Specifies the font size of the text.
font-style
Specifies whether the style of the font is normal, italic or oblique.
font-variant
Specifies a variation of the specified or default font-family.
font-weight
Specifies the font weight of the text.
icon
The font used to icon labels.
inherit
Takes the value of this property from the computed style of the parent element.
line-height
Specifies the distance between lines of text in a block-level element.
menu
The font used in menus.
message-box
The font used in dialog boxes.
small-caption
The font used in small controls.
status-bar
The font used in window status bars.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the font property:
<head>
    <style>
        .example {
            font: italic normal 600 medium/1.2em serif;
        }
    </style>
</head>
<body>
    <a class="example">font: italic normal 600 medium/1.2em serif</a>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content