font

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value Depends on arguments used
Inherited Yes
Applied To all elements
HTML analog <I>, <B>, <FONT>
Reference to specification http://www.w3.org/TR/CSS21/fonts.html#propdef-font

Description
This is a universal parameter. With the help of it you can determine few font style attributes concurrently.

Syntax

font: [font-style || font-variant || font-weight] font-size [/line-height] font-family

Arguments
The parameter font has required elements. They are script size and the family. Other elements are determined as you like. You should look at every parameter properties, if you want to learn it more carefully.

Using examples

p { font: 12pt/10pt sans-serif; }

A designation is sent from typography to indicate a font size and line spacing interval (leading) through slash. So, in that case 12pt is the size of the main text in the points and 10pt means leading. Sans-serif is indicated as the family.

p { font: bold italic 110% serif; }

The argument bold installs bold-faced script, the В«italicВ» - italic script. In that case the order of these destinations is unimportant; you can replace them if you want. Text size is specified in percent, serif is used as a garniture.

p { font: normal small-caps 12px/14px fantasy; }

The denotation small-maps belongs to the parameter font-variant. This denotation installs a text by way of small capitals (reduced capital letters). The argument normal is used both for 2 features: font-style and font-weight.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>font</title>
  <style type="text/css">
   .layer1 {
    font: 12pt sans-serif;  
   } 
   H1 {
    font: 200% serif;
   }
  </style>
 </head>
 <body> 
 
  <div class="layer1">
  <h1>Duis te feugifacilisi</h1>
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
  feugat nulla facilisi.
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.font