Special Edition Using HTML 4: -- Cascading Style Sheet Property Reference

By Joe Burns

from Special Edition Using HTML 4:
Cascading Style Sheet Property Reference

by Jerry Honeycutt

Font Properties

You can group the font properties using font. You specify the weight, style, size, and family, as in the following example:

font: bold normal 12pt times, serif

font-family

font-family is a prioritized list of typefaces for the element. You can specify a single typeface or a list of alternatives, separated by commas, as in the following example:


font-family: Courier, Times, Serif

You can use a font name you expect to be on the user's computer, such as Courier or Helvetica, or you can use a generic font name. Table B.11 shows the generic font names and provides an example of a font that looks similar.

Table B.11  Generic Fonts

Name Similar to:
serif Times New Roman
sans-serif Arial
cursive Script
fantasy Comic
monospace Courier New
In case the user doesn't have the font you've requested, always use a generic font name as the last item in the list. In the previous example, serif is the last font in the list. If the user doesn't have courier or times, the browser will use the generic font instead.

If you're using a font name that has multiple words, enclose the font name in quotes, as in the following example:

font-family: "Courier New", serif

font-size

font-size determines the size of the text in points (pt), inches (in), centimeters (cm), or pixels (px). You can also use a percentage, which is relative to the parent element's font size. You can also use one of the values shown in Table B.12.

Table B.12  font-size Values

Value Description
xx-small 50 percent smaller than the x-small font
x-small 50 percent smaller than the small font
small 50 percent smaller than the medium font
medium A medium-sized font, probably 10 points
large 50 percent larger than the medium font
x-large 50 percent larger than the large font
xx-large 50 percent larger than the x-large font
larger 50 percent larger than the parent element's font
smaller 50 percent smaller than the parent element's font


NOTE: The W3C recommendation that browser programs use a scaling factor of 50 percent is only a recommendation. Vendors are free to use any scaling factor that they want. Thus, the values in Table B.12 are only guidelines.

font-style

You can change the style of the font by using the font-style property. Table B.13 describes the possible values.

Table B.13  font-style Values

Value Description
normal Selects a normal face
oblique Selects an oblique face
italic Selects an italic face

font-variant

You use the font-variant property to display text in small caps. Setting this property to normal causes the browser to display the text normally. Setting this property to small-caps causes the browser to display the text using small caps.

font-weight

font-weight determines the thickness of the font. You can assign normal, bold, bolder, or lighter to this property. You can also use the series of numbers from 100, 200, ... 900 to this property, with each successive number representing a weight that is thicker than the previous number. For example, font-weight: 700 sets a thicker font weight than does font-weight: 400.


TIP: A font weight of 400 is roughly equivalent to a normal font weight.

© Copyright Macmillan Computer Publishing. All rights reserved.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •