Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
First, let's define some common terms:
A type family refers to a related group of typefaces. For example, the Times family came from newspaper practice.
A typeface refers to all of the characters that have the same style (weight, width, posture, and name). Example: Bodoni Bold Extended.
A font refers to a typeface in a particular size, such as Bodoni Bold Extended 12pt.
Attributes of a font include:
General class: serif, sans-serif, script.
Proportional (different characters may have different widths) or monospaced (all characters have the same width).
One of the problems of Web page design is that you can't assume that any given font exists on any given reader's system. For this reason, it is best to specify a set of fonts, listing your preferred fonts first, but also providing more generic alternatives for systems without your favorites.
The section below lists some of the CSS font properties.
This property enumerates the font family or families that
you want. You can use specific font names or one of the
generic font names
serif,
sans-serif,
monospace,
cursive, or
fantasy. Example:
body { font-family: Garamond, Times, "New Century Schoolbook",
serif }
Note that family names containing spaces must be enclosed
in quotes. This rule says to use Garamond if available;
use Times if Garamond is not available; and so on, using
the generic family serif of none
of the named fonts are available.
Allowable values are normal for vertical
text (the default), italic for italics, or
oblique for fonts that look like regular
text, only slanted.
The default for this attribute is normal,
but you may specify a value of small-caps
to get a caps-and-small-caps font.
This property specifies how heavy or bold the font is.
The default value is normal, but you can
instead give values of bold, bolder (meaning a bit bolder than the parent's
weight), or lighter (again, relative to
the parent's weight). You can also specify the weight as
one of the values 100, 200,
…, 900, where 100 is the lightest
weight, 400 is normal, and 700 is the same as bold. Not all values are available in any given
font.
You can specify the size of a font in four general ways:
As an absolute size. Permissible values range through
xx-small (extra
extra small),
x-small,
small,
medium,
large,
x-large, and
xx-large.
The difference between each size is about a factor of 1.5.
We discourage using absolute sizes because they make it impossible for large-print users to resize the fonts.
As a relative size, compared to the parent font. Two
values are supported: larger and smaller. Example:
body { font-size: medium; }
h2 { font-size: larger; }
p { font-size: smaller; }
In the example above, an h2 element
inside a body element would be
displayed in a larger font than medium, and a p element would use a smaller font.
By naming a specific font size. The units allowed are discussed elsewhere; see Section 6.1, “Dimensions”. Here is an example:
pre.special { font-size: 14pt; }
This rule would set in 14-point type all elements of class
special inside
pre elements.
As a percentage of the parent font size. Example:
em { font-size: 120%; }
This rule would set text inside an
em element 20%
larger than the parent font.