I Shot the Serif
The Rest
|
| ||||
| ||||
|
|
There are three more properties that control the font in CSS:
font-weight, font-style and
font-variant.
The font-weight property
| Property: | font-weight |
| Accepted values: | normal, bold, bolder, lighter, or any multiple of 100 from 100 to 900 |
| Initial value: | normal |
| Applies to: | All Elements |
| Inherited: | Yes |
font-weight values are similar to
font-size (though they say a lot of weight doesn't
compensate for a small size). The values 100 through
900 are the nine different levels of boldness available.
You can also say normal, which is the same as
400 (though I've heard "normal" weight depends on height
as well as bone structure... oh alright I'll shut up) or
bold, which corresponds to 700.
Since not all fonts actually have nine different levels of
boldness, a browser is supposed to "fill in the gaps," making 400
normal weight and 700 normal bold weight, and assigning any other
possible weights to the rest of the number in order of weight. Hence,
it might be the case that 400 and 500 are the same actual
boldness. For this reason, bolder (not the one in
Colorado) and lighter (not the one you use with the gas
cooker) don't just move up or down by 100, but are supposed to make
the font actually bolder or lighter (so that the difference is
visible). As you might see from the following example, this is not
always the case with Netscape and Explorer.
<P STYLE="font-weight: 100">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 200">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 300">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 400">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 500">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 600">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 700">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 800">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P> <P STYLE="font-weight: 900">BOLD? <SPAN STYLE="font-weight: bolder">BOLD!</SPAN> <SPAN STYLE="font-weight: lighter">COWARDLY...</SPAN></P>
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
BOLD? BOLD! COWARDLY...
Of course, the use of the numeric font weights is somewhat
specialised. If you're content with normal and
bold, you'd best leave them alone. But if you're bold
enough to use them, prepare for some unexpected results from Explorer
and Netscape.
The font-style property
| Property: | font-style |
| Accepted values: | normal, italic or oblique |
| Initial value: | normal |
| Applies to: | All Elements |
| Inherited: | Yes |
font-family simply indicates that the font should be
italic (slightly slanted) or oblique (completely opinionated... I mean,
even more slanted). The correspondance of these values to actual fonts
depends on the browser and the operating system, but you'll rarely make
use of both anyway. Note that Netscape Navigator 4.0 doesn't recognise
oblique anyway, so it's better to stick to italics for
now.
<P>Some <SPAN STYLE="font-style: italic">italic</SPAN> and <SPAN STYLE="font-style: oblique">oblique</SPAN> text.</P>
Some italic and oblique text.
The font-variant property
| Property: | font-variant |
| Accepted values: | normal or small-caps |
| Initial value: | normal |
| Applies to: | All Elements |
| Inherited: | Yes |
The font-variant property is even simpler: it specifies
whether or not the font should be rendered in small-caps (using capitals
for capitals and smaller capitals for lowercase letters, like when Death
speaks in Terry Pratchett novels). As illustrated by the following
stylesheet and document, Internet Explorer 4.0 merely capitalizes text
with this value set, while Netscape Navigator 4.0 ignores the property
completely.
<P><SPAN STYLE="font-variant: small-caps">Death writes like this. With gothic handwriting, usually.</SPAN></P>
Death writes like this. With gothic handwriting, usually.
There are a lot of properties for something as simple as specifying a font, and for those of us that are terminally lazy, there's a shorthand...
