7 out of 13 rated this helpful - Rate this topic

font-size property

[This documentation is preliminary and is subject to change.]

Sets or retrieves a value that indicates the font size used for text in the object.

Syntax

font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Property values

absolute-size: Set of keywords that indicate predefined font sizes. Named font sizes scale according to the user's font setting preferences. Possible values include the following: xx-small, x-small, small, medium, large, x-large, xx-large.
relative-size: Set of keywords that are interpreted as relative to the font size of the parent object.
length: Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see the CSS Values and Units Reference.
percentage: Integer, followed by a percent (%). The value is a percentage of the parent object's font size. In Internet Explorer 3.0, the value is calculated as a percentage of the default font size.

CSS information

Applies To	All elements
Media	visual
Inherited	1
Initial Value	medium

Remarks

Negative values are not allowed. Font sizes using the proportional "em" measure are based on the font size of the parent object.

Examples

The following examples use the font-size attribute and the font-size property to change font characteristics.

This example sets the font size on several paragraphs using different size values.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/font-size.htm

Copy


<STYLE>
   BODY{font-size: 10pt }
   .P1 {font-size: 14pt }
   .P2 {font-size: 75% }
   .P3 {font-size: xx-large }
   .P4 {font-size: larger }
</STYLE>

This example uses inline scripting to set the font size to 14pt when an onmouseover event occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/fontSize.htm

Copy


<DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='14pt'">
:
</DIV>

The topic "font-size Attribute | fontSize Property" gets the new default value for font-size wrong. It should read "As of Internet Explorer 6, when you use the !DOCTYPE declaration to specify standards-compliant mode, the default value for this property is medium, not small."

This change was made to correct a well-known problem with scaling pages from the Text Size commands on the IE View menu.

The "larger" and "smaller" commands are mapped to the HTML relative font-size keywords of the same names. They instruct the browser to rescale the font-size of text relative to its container's font-size setting. If the container's font-size is set in scalable em or percentage units, then the text is rescaled relative to the font-size setting of the container's parent element.

By contrast, the "smallest," "medium" and "largest" Text Size options are mapped to HTML keywords for absolute font sizes. These depend upon the default fonts selected in the user's browser preferences, and the browser's internal font scaling algorithms.

In IE 6 not running under the "standards-compliant" doctype, and in earlier Internet Explorer versions, the default browser text-size was not mapped to the HTML absolute font-size keyword "medium," but rather to the absolute keyword "small."

Cf. "CSS Enhancements in Internet Explorer 6"
http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx#cssenhancements_topic2
which gets the new default property "medium" right:
But Wait, There Are More New Features
"When you use the !DOCTYPE declaration to switch on standards-compliant mode with Internet Explorer 6 or later, ..."
Keyword Values of the Font-size Property
"The medium value of the font-size property matches the default normal font size.
The keyword values of this property include xx-small, x-small, small, medium, large, x-large, and xx-large.
With earlier versions of Internet Explorer, these values are not defined intuitively. The medium value is not the default normal font size; small is the default."

And see also "CSS Discuss-Wiki, Using Keywords"
http://css-discuss.incutio.com/?page=UsingKeywords
which explains the need for this change as follows:
"...Internet Explorer 6 in Quirks Mode and earlier Internet Explorer versions treat 'small' rather than 'medium' as the browser default, and each of the other keyword sizes correspondingly larger. As a consequence, authors using keywords should ensure that their documents are rendered in Standards Mode, and understand that early Internet Explorer versions will not size them the same as current browser versions."

History