HTML and CSS Reference
In-Depth Information
font-style
font-style
makes the text slanted. According to specifications,
italic
is a cursive
companion face to the normal face, and
oblique
is a slanted form of the normal face.
Both faces tend to be rendered the same way for most fonts, however.
font-style : inherit | normal | italic | oblique
font-variant
font-variant
can be used to display text using small caps instead of lowercase letters.
A value of
small-caps
renders text in uppercase letters that are smaller than regular
uppercase letters.
font-variant : inherit | normal | small-caps
font-weight
font-weight
sets the thickness of the font. The
bolder
and
lighter
values set the
thickness relative to the parent element, and the numeric values specify absolute weights.
The value of
bold
is equal to 700, and
normal
is the same as 400.
font-weight : inherit | normal | bold | bolder |
lighter | 100 | 200 | ... | 900
Even if several weight values can be specified, most fonts have only one type of bold,
as shown in the following example rendering:
lighter normal
bold bolder
100 200 300 400 500
600 700 800 900
font
There is a convenient shorthand property named
font
that sets all the font properties in
one declaration.
font : inherit | <font-style> + <font-variant> +
<font-weight> + <font-size> / <line-height> +
<font-family>
The properties must be specified in the order listed previously. As long as this order is
kept, either one of the properties can be left out (except for
font-size
and
font-family
,
which are mandatory). If a property is left out, the default value for that property is used,
which is to inherit the parent's value. The following example applies four font properties
to the paragraph element:
p { font: italic 50%/125% Verdana; }