Special Edition Using HTML 4: -- Cascading Style Sheet Property Reference
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 |
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.
