The Rest - I Shot the Serif - HTML with Style

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

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>

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

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>

The font-variant property

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>

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...

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 20, 1998
Revised: Nov 3, 1998