English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The CSS font property sets the style, variant, boldness, and size of the text content of the element/Line height and font family. It is used to declarefont-style,font-variant,font-weight,font-size,line-heightandfont-familyAbbreviated properties for setting various font attributes in
The following table provides usage instructions and version history of this attribute, as well as the syntax of its use in JavaScript scripts.
| Default value: | View all properties |
|---|---|
| Applies to: | All elements |
| Inheritance: | Yes |
| Animaatable: | Yes, because some properties of shorthand can be animated.Please refer to Animation properties. |
| Version: | CSS 1,2,3 |
| JavaScript syntax: | object.style.font="italic small-caps bold 14px arial,sans-serif |
The syntax of this attribute is as follows:
font: [ font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit
When using the font shorthand attribute, certain conditions must be met. If these conditions are not met, the attribute is invalid and will be completely ignored.
Must definefont-sizeandfont-familythe attribute value.
Must be definedfont-sizevalue (if any) before definingfont-style,font-variantandfont-weightbefore the value of the attribute.
line-heightMust be definedfont-sizeImmediately define the attribute value after the attribute, and add the mandatory " /" (forward slash).
font-familyMust be the last defined value.
The following examples demonstrate how to use the font attribute, please note the order of the attribute values.
h1 {
font: bold 2.5em "Times New Roman", Times, serif;
}
p {
font: normal 1.2em Arial, Helvetica, sans-serif;
}Test and see‹/›The following table describes the value of this attribute.
| Value | Description |
|---|---|
| font-style | Set the font style. |
| font-variant | Set the font variant. |
| font-weight | Set the font weight. |
| font-size | Set the font size. |
| line-height | Set the line height. |
| font-family | Specify the font family. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated element adopts the font attribute value of its parent element. |
The following values refer to system fonts: | |
| caption | Font used for subtitle controls (such as buttons, dropdown menus, etc.). |
| icon | Font used for marking icons. |
| menu | Font used in menus (such as dropdown menus and menu lists). |
| message-box | Font used in dialog boxes. |
| small-caption | Font used for marking small controls. |
| status-bar | Font used in the window status bar. |
Browser Compatibility of font Attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS Font,CSS Text.
Related Attributes and Rules:font-style,font-variant,font-weight,font-size,line-height,font-family,@font-face.