start page | rating of books | rating of authors | reviews | copyrights
12.7. Font Properties
Fonts
are
one of the most basic things designers want to set with CSS. Is the
text italic? Is it bold? What typeface and size are used? CSS
provides properties to set all these basic characteristics of text.
In particular, you can set these properties:
- font-family
-
This is a list of font names, separated by
commas, in order of preference. The last name in the list should
always be one of the generic names serif,
sans-serif, monospace,
cursive, or fantasy. Multiword
names like "Times New Roman" should
be enclosed in quotes.
- font-style
-
The value italic
indicates that an italic version of the font should be used if one is
available. The value oblique suggests that the
text should be algorithmically slanted, as opposed to using a
specially designed italic font. The default is
normal (no italicizing or slanting). An element
can also be set to inherit the
font-style of the parent element.
- font-size
-
This is the size of the font. This should be specified as one of the
values xx-small, x-small,
small, medium,
large, x-large,
xx-large. Alternately, it can be given as a
percentage of the font-size of the parent element.
It can also be specified as a length like 0.2cm or
12pt, but this should only be done for print
media.
- font-variant
-
If this property is set to
small-caps, then lowercase text is rendered in
smaller capitals like this instead
of normal lowercase letters.
- font-weight
-
This property determines how bold or light
the text is. It's generally specified as one of the
keywords normal (the default),
bold, bolder, or
lighter. It can also be set to any multiple of 100
from 100 (lightest) to 900
(darkest). However, not all browsers necessarily provide nine
different levels of boldness.
- font-stretch
-
This property adjusts the space between
letters to make the text more or less compact. Legal values include
normal (the default), wider,
narrower, ultra-condensed,
extra-condensed, condensed,
semi-condensed, semi-expanded,
expanded, extra-expanded, and
ultra-expanded.
For example, this style rule uses all of the previous properties to
make the dish element a suitably impressive
headline:
dish {
font-family: Helvetica, Arial, sans-serif;
font-size: x-large;
font-style: italic;
font-variant: small-caps;
font-weight: 900;
font-stretch: semi-expanded
}
 |  |  |
| 12.6. Pixels, Points, Picas, and Other Units of Length |  | 12.8. Text Properties |
Copyright © 2002 O'Reilly & Associates. All rights reserved.