Working with fonts
Several font styling types are available as well as style types that affect the
display of fonts, covering all the possible variations with a font. It is important
to note that, although most of the font style types are device independent, the
font family is device specific. For this reason the CSS style specification allows
for a range of alternatives. e.g.
h2
{
font-family: verdana, helvetica, sans-serif;
}
In this example the browser will work through the list until it finds a font family
which it can interpret. All browsers are required to support the following generic
font types:
- sans-serif
- serif
- monospace
- cursive
- fantasy,
and these will be substituted by the appropriate default font on the target browser.
For example, a Windows based browser will usually use Arial for Sans-Serif. You
should always provide an alternative for a specific font, and this should usually
be a generic alternative as in the example above.
Other font style types and possible values are shown below:
- font-style
- normal or italic or
oblique
- font-variant
- normal
or small-caps
- font-weight
- normal
or bold or
bolder or lighter or
100 or 200 or
300 or 400 or
500 or 600 or
700 or 800 or
900
- font-size
- an absolute value ( e.g.1cm)
or relative
size value (e.g. 1.5em)
- line-height
- an absolute
(e.g. 1cm)
or relative size value
(e.g. 80%)
Alternatively, all the values can be set in a single line using a shorthand notation,
using the values for:
font-style font-variant font-weight font-size/line-height font-family>.
E.g.
p
{
font: normal small-caps bolder 120%/100% "Comic Sans",cursive
}
resulting in:
This is a normal paragraph with default setting.
This is a paragraph using the styles above.