font-size

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 medium
Inherited Yes
Applied To all elements
HTML analog <font size="...">
Reference to specification http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Description
This parameter defines a size of element font. The font can be determined by some devices. They are constant dialing (xx-small, x-small, small, medium, large, x-large, xx-large) specify a size which is called absolute. They are quite not absolute because of dependence on browser adjustment and operation system.
Another constant dialing (larger, smaller) installs relational font size. To define a font size of the current element these relational sizes are used to a parent element, because this size is derived from a parent element.
A font size highly depends on this parameter denotation of a parent element.

Syntax

font-size: absolute size| relational size | denotation | percent

Arguments
Following denotations are used for absolute size: xx-small, x-small, small, medium, large, x-large, xx-large. Compatibility these sizes with a font size are given below.





Tab.1. Font size in CSS and HTML
CSS xx-small x-small small medium large x-large xx-large
HTML 1 2 3 4 5 6 7



Relational font size is specified by the arguments larger and smaller.
Also it is allowed to use any valid items CSS: em (element font height), ex (symbol x height), points (pt), pixels (px), percent (%) etc. Parent element font size is taken as 100%. Negative values are not allowed.

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-size</title>
  <style type="text/css">
   H1 {
    font-family: 'Times New Roman', Times, serif; /* Text typeface */ 
    font-size: 250%; /* Font size in percents */ 
   } 
   P {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11pt; /* Font size in points */ 
   }
  </style>
 </head> 
 <body> 
 
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

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

Remark
Font size definition "font-size: medium" leads to different font sizes in browsers Internet Explorer and Netscape (Firefox).