font
The font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.
- Syntax
- Values
- DOM
- Example | caption
- Example | font-family | family-name
- Example | font-family | generic-family
- Example | font-size | absolute-size
- Example | font-size | length
- Example | font-size | percentage
- Example | font-size | relative-size
- Example | font-style | italic
- Example | font-style | normal
- Example | font-style | oblique
- Example | font-variant | normal
- Example | font-variant | small-caps
- Example | font-weight | 100-900
- Example | font-weight | bold
- Example | font-weight | bolder
- Example | font-weight | lighter
- Example | font-weight | normal
- Example | icon
- Example | line-height | length
- Example | line-height | normal
- Example | line-height | number
- Example | line-height | percentage
- Example | menu
- Example | message-box
- Example | small-caption
- Example | status-bar
- Example | DOM | font-family
- Example | DOM | font-size
- Example | DOM | font-style
- Example | DOM | font-variant
- Example | DOM | font-weight
- Example | DOM | line-height
- Example | DOM
- External
Syntax
font: [[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initial: | normal, normal, normal, medium, normal, depends on user agent |
Applies To: | all elements |
Inherited: | yes |
Percentages: | NA, except font-size refers to parent element's font size and line-height refers to the font size of the element itself |
Media: | visual |
Values
font: value
Value | Description |
---|---|
absolute-size | Index to a table of font sizes: xx-small | x-small | small | medium | large | x-large | xx-large |
bold | 700 in the ordered sequence |
bolder | Bolder relative to the weight inherited from the parent |
caption | Font used for captioned controls (buttons, drop-downs, ...) |
family-name | Name of a font family of choice |
generic-family | Name of a generic font family as an alternative |
icon | Font used to label icons |
italic | Cursive font which is slanted to the right |
length | Horizontal or vertical measurements: em | ex | px | in | cm | mm | pt | pc |
lighter | Lighter relative to the weight inherited from the parent |
menu | Font used in menus (dropdown menus and menu lists) |
message-box | Font used in dialog boxes |
normal | Upright font |
normal | 400 in the ordered sequence |
normal | Not a small-caps font |
normal | "Reasonable" value based on the font of the element |
number | Number multiplied by the element's font-size |
oblique | Normal font which is slanted to the right |
percentage | Value relative to the inital value |
percentage | Percentage multiplied by the element's font-size |
relative-size | Relative to the table of font sizes and the font size of the parent element: smaller | larger |
small-caps | Lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions |
small-caption | Font used for labeling small controls |
status-bar | Font used in window status bars |
DOM
[window.]document.getElementById("element-id").style.font = "font";
Example | caption
Example | font-family | family-name
Example | font-family | generic-family
Example | font-size | absolute-size
Example | font-size | length
Example | font-size | percentage
Example | font-size | relative-size
Example | font-style | italic
Example | font-style | normal
Example | font-style | oblique
Example | font-variant | normal
Example | font-variant | small-caps
Example | font-weight | 100-900
Example | font-weight | bold
Example | font-weight | bolder
Example | font-weight | lighter
Example | font-weight | normal
Example | icon
Example | line-height | length
Example | line-height | normal
Example | line-height | number
Example | line-height | percentage
Example | menu
Example | message-box
Example | small-caption
Example | status-bar
Example | DOM | font-family
Example | DOM | font-size
Example | DOM | font-style
Example | DOM | font-variant
Example | DOM | font-weight
Example | DOM | line-height
Example | DOM
External
W3C Cascading Style Sheets, level 1
W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification