Examples
.modern {font-family: "Arial, Helvetica, sans-serif";}
p {font-family: "Times New Roman";}
body {font-family: "Times New Roman, Courier";}
#special {font-family: fantasy;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8, 6, 7
Opera 4, 5, 6, 7
font-size
This property sets the font size of text. Options include exact sizes set with points (pt), pixels (px), picas (pc), inches (in), millimeters (mm), and centimeters (cm). Standard relative sizing units in em (em) and x-height (ex) may also be used, as well as the relative size keywords larger and smaller and percentage value (for example, 90%). Percentage values set the font size to a percentage of the primary font size of a section or document. For example, if the font-size for the body element was set to 12pt, and font size for a <p> tag inside the body was set to 200%, the text within the <p> tag would be 24pt. The property also supports size keywords (xx-small, x-small, small, medium, large, x-large, xx-large). The size keywords are roughly equivalent to the 1-7 size values for a <font> tag and the use of larger or smaller will increase or decrease the text size one relative size.
Examples
body {font-size: 18pt;}
#heading1 {font-size: 36px;}
p {font-size: 2em;}
h6 {font-size: xx-small;}
.special {font-size: 75%;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8, 6, 7
Opera 4, 5, 6, 7
TIP Keyword sizes such as xx-large may vary noticeably in browser implementations. Point (pt) size value may also vary across systems that measure screen resolution differently.
font-size-adjust
This property is used for scaled fonts to make sure that text takes up the same amount of room regardless of the availability of a particular font or not. According to specification, when used properly the property helps ensure the x-height of the first font in a font selection list is maintained for subsequent fonts in the list. This property takes a number, which specifies the scaling factor to be used to adjust fonts. The default value of none does not preserve the font's x-height.
Browser and CSS Support Notes
CSS2
No IE support
No Nav or Mozilla support
No Opera support
font-size-stretch
This property is used to stretch or condense a font and takes values of ultra-condensed, extracondensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, and ultra-expanded. The property also can take a relative value of wider or narrower to modify the appearance of text relative to a parent font. The default value is normal and is used to override inherited font-size-stretch values. At the time of this edition's writing, this property was yet to be supported by any major browser.
Examples
.narrow {font-stretch: narrower;}
#arialstretch {font-family: Arial; font-stretch: ultra-expanded;}
Browser and CSS Support Notes
CSS2
No IE support
No Nav or Mozilla support
No Opera support
font-style
This property sets the style of a font to normal, oblique, or italic. Sometimes font style can be controlled using a specific font (for example, Times New Roman Italic).
Examples
.backToNormal {font-style: normal;}
#special {font-style: oblique;}
p.emphasis {font-style: italic;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8, 6, 7
Opera 4, 5, 6, 7
font-variant
This property sets a variation of the specified or default font family. Values currently supported are normal and small-caps. The small-caps value sets text in smaller size all capitals. This style is often used in legal documents and license agreements. The normal value would be used to override any inherited font-variant value.
Examples
.legalese {font-variant: small-caps;}
.nolegal {font-variant: normal;}
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8, 6, 7
Opera 4, 5, 6, 7
font-weight
This property sets the weight, or relative boldness, of a font. Values can be set with named values (normal or bold) or with numbered values (100-900). Numeric weight values run fromlightest (100) to boldest (900) in increments of 100. In practice, under most browsers the values 100-500 display as normal text; 600-900 display as bold. Browser screen support for other values is inconsistent at best, though print output may show variations. Relative values of lighter or bolder will increase or decrease the font-weight value relative to its surrounding weight. However, onscreen this generally means simply toggling the boldness on or off. There is some consideration for mapping various weight fonts into associated font families. For example, text in Helvetica at font-weight: 900 would be mapped into Helvetica Black. However, while described in the specification, the support for weight to font family mapping appears nonexistent in browsers at this edition's writing.
Examples
em {font-weight: bold;}
#light {font-weight: 300;}
.superbold {font-weight: 900;}
strong {font-weight: normal; color: red;}
/* note override of default tag presentation */
Browser and CSS Support Notes
CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8, 6, 7
Opera 4, 5, 6, 7
