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 | message-box

Example | small-caption

Example | status-bar

Example | DOM | font-family

<!doctype html>
<html>
<head>
  <script>
    function mouseover1() {
      document.getElementById("id1").style.font = "12pt Times";
    }
    function mouseover2() {
      document.getElementById("id1").style.font = "12pt Helvetica";
    }
    function mouseover3() {
      document.getElementById("id1").style.font = "12pt Zapf-Chancery";
    }
    function mouseover4() {
      document.getElementById("id1").style.font = "12pt Western";
    }
    function mouseover5() {
      document.getElementById("id1").style.font = "12pt Courier";
    }
    function mouseover6() {
      document.getElementById("id1").style.font = "12pt serif";
    }
    function mouseover7() {
      document.getElementById("id1").style.font = "12pt sans-serif";
    }
    function mouseover8() {
      document.getElementById("id1").style.font = "12pt cursive";
    }
    function mouseover9() {
      document.getElementById("id1").style.font = "12pt fantasy";
    }
    function mouseover10() {
      document.getElementById("id1").style.font = "12pt monospace";
    }
    function mouseover11() {
      document.getElementById("id1").style.font = "12pt Times, serif";
    }
    function mouseover12() {
      document.getElementById("id1").style.font = "12pt Helvetica, sans-serif";
    }
    function mouseover13() {
      document.getElementById("id1").style.font = "12pt Zapf-Chancery, cursive";
    }
    function mouseover14() {
      document.getElementById("id1").style.font = "12pt Western, fantasy";
    }
    function mouseover15() {
      document.getElementById("id1").style.font = "12pt Courier, monospace";
    }
  </script>
</head>
<body>
  <a href="/" onmouseover="mouseover1()">Times</a>
  <a href="/" onmouseover="mouseover2()">Helvetica</a>
  <a href="/" onmouseover="mouseover3()">Zapf-Chancery</a>
  <a href="/" onmouseover="mouseover4()">Western</a>
  <a href="/" onmouseover="mouseover5()">Courier</a><br>
  <a href="/" onmouseover="mouseover6()">serif</a>
  <a href="/" onmouseover="mouseover7()">sans-serif</a>
  <a href="/" onmouseover="mouseover8()">cursive</a>
  <a href="/" onmouseover="mouseover9()">fantasy</a>
  <a href="/" onmouseover="mouseover10()">monospace</a><br>
  <a href="/" onmouseover="mouseover11()">Times serif</a>
  <a href="/" onmouseover="mouseover12()">Helvetica sans-serif</a>
  <a href="/" onmouseover="mouseover13()">Zapf-Chancery cursive</a>
  <a href="/" onmouseover="mouseover14()">Western fantasy</a>
  <a href="/" onmouseover="mouseover15()">Courier monospace</a>
  <p id="id1">font-family</p>
</body>
</html>

Example | DOM | font-size

<!doctype html>
<html>
<head>
  <script>
    function mouseover1() {
      document.getElementById("id1").style.font = "xx-small Times";
    }
    function mouseover2() {
      document.getElementById("id1").style.font = "x-small Times";
    }
    function mouseover3() {
      document.getElementById("id1").style.font = "small Times";
    }
    function mouseover4() {
      document.getElementById("id1").style.font = "medium Times";
    }
    function mouseover5() {
      document.getElementById("id1").style.font = "large Times";
    }
    function mouseover6() {
      document.getElementById("id1").style.font = "x-large Times";
    }
    function mouseover7() {
      document.getElementById("id1").style.font = "xx-large Times";
    }
    function mouseover8() {
      document.getElementById("id1").style.font = "smaller Times";
    }
    function mouseover9() {
      document.getElementById("id1").style.font = "larger Times";
    }
    function mouseover10() {
      document.getElementById("id1").style.font = "1em Times";
    }
    function mouseover11() {
      document.getElementById("id1").style.font = "2.3ex Times";
    }
    function mouseover12() {
      document.getElementById("id1").style.font = "16px Times";
    }
    function mouseover13() {
      document.getElementById("id1").style.font = "0.167in Times";
    }
    function mouseover14() {
      document.getElementById("id1").style.font = "0.432cm Times";
    }
    function mouseover15() {
      document.getElementById("id1").style.font = "4.32mm Times";
    }
    function mouseover16() {
      document.getElementById("id1").style.font = "12pt Times";
    }
    function mouseover17() {
      document.getElementById("id1").style.font = "1pc Times";
    }
    function mouseover18() {
      document.getElementById("id1").style.font = "150% Times";
    }
  </script>
</head>
<body>
  <a href="/" onmouseover="mouseover1()">xx-small</a>
  <a href="/" onmouseover="mouseover2()">x-small</a>
  <a href="/" onmouseover="mouseover3()">small</a>
  <a href="/" onmouseover="mouseover4()">medium</a>
  <a href="/" onmouseover="mouseover5()">large</a>
  <a href="/" onmouseover="mouseover6()">x-large</a>
  <a href="/" onmouseover="mouseover7()">xx-large</a><br>
  <a href="/" onmouseover="mouseover8()">smaller</a>
  <a href="/" onmouseover="mouseover9()">larger</a><br>
  <a href="/" onmouseover="mouseover10()">em</a>
  <a href="/" onmouseover="mouseover11()">ex</a>
  <a href="/" onmouseover="mouseover12()">px</a>
  <a href="/" onmouseover="mouseover13()">in</a>
  <a href="/" onmouseover="mouseover14()">cm</a>
  <a href="/" onmouseover="mouseover15()">mm</a>
  <a href="/" onmouseover="mouseover16()">pt</a>
  <a href="/" onmouseover="mouseover17()">pc</a><br>
  <a href="/" onmouseover="mouseover18()">percentage</a>
  <p id="id1">font-size</p>
</body>
</html>

Example | DOM | font-style

Example | DOM | font-variant

Example | DOM | font-weight

<!doctype html>
<html>
<head>
  <script>
    function mouseover1() {
      document.getElementById("id1").style.font = "100 12pt Times";
    }
    function mouseover2() {
      document.getElementById("id1").style.font = "200 12pt Times";
    }
    function mouseover3() {
      document.getElementById("id1").style.font = "300 12pt Times";
    }
    function mouseover4() {
      document.getElementById("id1").style.font = "400 12pt Times";
    }
    function mouseover5() {
      document.getElementById("id1").style.font = "500 12pt Times";
    }
    function mouseover6() {
      document.getElementById("id1").style.font = "600 12pt Times";
    }
    function mouseover7() {
      document.getElementById("id1").style.font = "700 12pt Times";
    }
    function mouseover8() {
      document.getElementById("id1").style.font = "800 12pt Times";
    }
    function mouseover9() {
      document.getElementById("id1").style.font = "900 12pt Times";
    }
    function mouseover10() {
      document.getElementById("id1").style.font = "normal 12pt Times";
    }
    function mouseover11() {
      document.getElementById("id1").style.font = "bold 12pt Times";
    }
    function mouseover12() {
      document.getElementById("id1").style.font = "bolder 12pt Times";
    }
    function mouseover13() {
      document.getElementById("id1").style.font = "lighter 12pt Times";
    }
  </script>
</head>
<body>
  <a href="/" onmouseover="mouseover1()">100</a>
  <a href="/" onmouseover="mouseover2()">200</a>
  <a href="/" onmouseover="mouseover3()">300</a>
  <a href="/" onmouseover="mouseover4()">400</a>
  <a href="/" onmouseover="mouseover5()">500</a>
  <a href="/" onmouseover="mouseover6()">600</a>
  <a href="/" onmouseover="mouseover7()">700</a>
  <a href="/" onmouseover="mouseover8()">800</a>
  <a href="/" onmouseover="mouseover9()">900</a><br>
  <a href="/" onmouseover="mouseover10()">normal</a>
  <a href="/" onmouseover="mouseover11()">bold</a>
  <a href="/" onmouseover="mouseover12()">bolder</a>
  <a href="/" onmouseover="mouseover13()">lighter</a>
  <p id="id1">font-weight</p>
</body>
</html>

Example | DOM | line-height

<!doctype html>
<html>
<head>
  <script>
    function load() {
      document.getElementById("id1").style.backgroundColor = "yellow";
    }
    function mouseover1() {
      document.getElementById("id1").style.font = "1em/1em Times";
    }
    function mouseover2() {
      document.getElementById("id1").style.font = "2.3ex/2.3ex Times";
    }
    function mouseover3() {
      document.getElementById("id1").style.font = "16px/16px Times";
    }
    function mouseover4() {
      document.getElementById("id1").style.font = "0.167in/0.167in Times";
    }
    function mouseover5() {
      document.getElementById("id1").style.font = "0.432cm/0.432cm Times";
    }
    function mouseover6() {
      document.getElementById("id1").style.font = "4.32mm/4.32mm Times";
    }
    function mouseover7() {
      document.getElementById("id1").style.font = "12pt/12pt Times";
    }
    function mouseover8() {
      document.getElementById("id1").style.font = "1pc/1pc Times";
    }
    function mouseover9() {
      document.getElementById("id1").style.font = "12pt/normal Times";
    }
    function mouseover10() {
      document.getElementById("id1").style.font = "12pt/2 Times";
    }
    function mouseover11() {
      document.getElementById("id1").style.font = "12pt/200% Times";
    }
  </script>
</head>
<body onload="load()">
  <a href="/" onmouseover="mouseover1()">em</a>
  <a href="/" onmouseover="mouseover2()">ex</a>
  <a href="/" onmouseover="mouseover3()">px</a>
  <a href="/" onmouseover="mouseover4()">in</a>
  <a href="/" onmouseover="mouseover5()">cm</a>
  <a href="/" onmouseover="mouseover6()">mm</a>
  <a href="/" onmouseover="mouseover7()">pt</a>
  <a href="/" onmouseover="mouseover8()">pc</a><br>
  <a href="/" onmouseover="mouseover9()">normal</a><br>
  <a href="/" onmouseover="mouseover10()">number</a><br>
  <a href="/" onmouseover="mouseover11()">percentage</a>
  <p id="id1">line-height</p>
</body>
</html>

Example | DOM

<!doctype html>
<html>
<head>
  <script>
    function mouseover1() {
      document.getElementById("id1").style.font = "caption";
    }
    function mouseover2() {
      document.getElementById("id1").style.font = "icon";
    }
    function mouseover3() {
      document.getElementById("id1").style.font = "menu";
    }
    function mouseover4() {
      document.getElementById("id1").style.font = "message-box";
    }
    function mouseover5() {
      document.getElementById("id1").style.font = "small-caption";
    }
    function mouseover6() {
      document.getElementById("id1").style.font = "status-bar";
    }
  </script>
</head>
<body>
  <a href="/" onmouseover="mouseover1()">caption</a>
  <a href="/" onmouseover="mouseover2()">icon</a>
  <a href="/" onmouseover="mouseover3()">menu</a>
  <a href="/" onmouseover="mouseover4()">message-box</a>
  <a href="/" onmouseover="mouseover5()">small-caption</a>
  <a href="/" onmouseover="mouseover6()">status-bar</a>
  <form>
    <p><label for="name">Name: </label><input id="name" type="text"></p>
    <p><label for="email">Email: </label><input id="email" type="text"></p>
    <p><button id="id1">Submit</button></p>
  </form>
</body>
</html>

External

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification