The font-weight property (CSS Reference)
Introduction
The font-weight property can be used to set the weight of
the characters. It means that you can decide how thick or thin the chars should
be.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>font-weight Demonstration</title>
</head>
<span style="font-weight: lighter;">lighter
</span><br/>
<span style="font-weight: normal;">normal
</span><br/>
<span style="font-weight: bold;">bold
</span><br/>
<span style="font-weight: bolder;">bolder
</span><br/>
<span style="font-weight: 100;">100
</span><br/>
<span style="font-weight: 200;">200
</span><br/>
<span style="font-weight: 300;">300
</span><br/>
<span style="font-weight: 400;">400
</span><br/>
<span style="font-weight: 500;">500
</span><br/>
<span style="font-weight: 600;">600
</span><br/>
<span style="font-weight: 700;">700
</span><br/>
<span style="font-weight: 800;">800
</span><br/>
<span style="font-weight: 900;">900
</span>
<body>
</body>
</html>
Output
 Values
|
Name:
|
Description:
|
|
normal
|
This is the default value and it is equal to 400 on the
numeric scale. This value can be useful if you want to make sure that no
previous values effect on the current element.
|
|
bold
|
This value can be used to make the chars appear in bold.
It is equal to the HTML’s <b> tag and 700 on the numeric scale.
|
|
bolder
|
This is used to determine the next bolder value for the
text. If the previous value was 900, it will remain 900. If no previous value
exists, it will simply use the next bolder numerical value.
|
|
lighter
|
This is used to set the next lighter weight for the text
than the previous one. If the previous value was 100 then it will remain 100.
If no previous value exists, it will simply use the next lighter numerical
value.
|
|
100 to 900
|
These values can be used to set the next bolder or lighter
level of the text. Each increased value will be darker than the previous one
and each decreased value will be lighter than the previous one. Note that 400
is considered as normal and 700 as bold.
|
|
Email TopXML