|
July 26, 1998
 |
 |
Putting Style Sheets in Perspective
font-weight
|
- Initial Value:
- normal
- Allowed Values:
- normal
- bold
- bolder
- lighter
- 100 - 900
-
inherit
- Applies to:
- all elements
- Inherited?:
- yes
|
The use of the B element, like many other elements that specify
font information, is being discouraged in favor of style sheets.
Some of the elements that specify font information have already
been deprecated. The suggestion that we use CSS to replace the
others might be an indication that other of the elements will
bite the dust somewhere in the future. This is sheer speculation
on my part, but it won't hurt one bit to be prepared and know how
to add bolded text with CSS.
The font-weight property can be used to specify the
weight, (boldness) of a font. And it gets even better! You're
no longer limited to just <B>, now you can specify
the 'thickness' of the font!
It should be noted that even though it appears that there
are thirteen different values, there are really only nine, and
not all of the
font families
will display in all nine weights,.
Normal is the same as 400, and bold is the same as 700. Lighter
and bolder are not weights unto themselves but take their
weight relative to their parent element.
normal | bold | bolder | lighter
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
<P style="font-weight: normal">normal
|
normal |
<P style="font-weight: bold">bold
|
bold |
<P style="font-weight: bolder">bolder
|
bolder
|
<P style="font-weight: lighter">lighter
|
lighter
|
<P style="font-weight: 100">100
|
100
|
<P style="font-weight: 200">200
|
200
|
<P style="font-weight: 300">300
|
300
|
<P style="font-weight: 400">400
|
400
|
<P style="font-weight: 500">500
|
500
|
<P style="font-weight: 600">600
|
600
|
<P style="font-weight: 700">700
|
700
|
<P style="font-weight: 800">800
|
800
|
<P style="font-weight: 900">900
|
900
|
The above example shows the font-weight property applied
via the style attribute. The example below shows it applied
to the P element within the
style element.
<STYLE TYPE="text/css">
P { font-weight: 500;
}
</STYLE>
|
Additional Resources:
Putting Style Sheets in Perspective:font-variant
Putting Style Sheets in Perspective: Table of Contents
Putting Style Sheets in Perspective:font-size
|
