HTML XHTML The Complete Reference
home » reference » appendix b » css1 / css2 properties

font


This property provides a shorthand way to specify all font properties with one style rule. The shorthand syntax is shown here:

font: font-style font-variant font-weight font-size/line-height font-family;
It is not necessary to include all properties and the lists of variant fonts should be separated by commas with those font names consisting of more than one word placed in quotes. You shouldn't use shorthand rules until the individual property values are correctly set.

Example


p {font: normal small-caps bold 12pt/18pt "Times New Roman", Courier, serif;}
.super {font: italic 18pt sans-serif;}

Browser and CSS Support Notes


CSS1
IE 3 (incomplete) 4, 5, 5.5, 6
Nav 4 (incomplete on Mac), 4.5-4.8, 6, 7
Opera 6, 7


font-family


This property sets the font face for text. It is equivalent to the face attribute of a <font> tag. Fonts may be named specifically or a generic font family name may be used. When multiple font names are specified and separated by commas, they are read in descending order looking for the first match. Generally, a generic font name will be listed at the end of a font list. There are five generic font names currently available: serif, sans-serif, cursive, fantasy, and monospace. Their renderings under modern browsers are shown here, but beware that they may not render the same in all browsers.

(X)HTML Elements
CSS Properties
 
 

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

 
Back: float Next: height
< Home | About | Chapters | Examples | Errata | Reference | Site Map >