font

The font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.

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