CSS Property font-weight
This property sets the font weight. The numeric value 400 is equivalent to the keyword normal, and 700 is equivalent to bold.
Summary
| Item | Value |
|---|---|
| Initial value | normal |
| Inherited | Yes. |
| Version | CSS1 |
| JavaScript syntax | object.style.fontWeight="900" |
| Applies to | All elements. |
CSS Syntax
font-weight: normal |
bold |
bolder |
lighter |
100 |
200 |
300 |
400 |
500 |
600 |
700 |
800 |
900 |
inherit
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| normal | normal characters. Default value |
| bold | Defines thick characters |
| bolder | Defines thicker characters |
| lighter | Defines lighter characters |
| 100 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 200 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 300 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 400 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 500 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 600 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 700 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 800 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| 900 | Defines from thin to thick characters. normal equals 400 , 700 is bold |
| inherit | Inherit the font weight from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
font-weight |
Yes | Yes | Yes | Yes | Yes |
Example
The following uses different font weight value to set font-weight.
b {font-weight: 700;}
strong {font-weight: bold;}
.delicate {font-weight: lighter;}
<!DOCTYPE HTML>
<html>
<head>
<style>
a:link {<!-- w w w . j a v a2 s .co m-->
font-weight: bold;
text-decoration: none;
color: red;
}
a:visited {
font-weight: bold;
text-decoration: line-through;
color: black;
}
</style>
</head>
<body>
<ul>
<li><a href=" ">A</a></li>
<li><a href=" ">B</a></li>
<li><a href=" ">C</a></li>
<li><a href=" ">java2s.com</a></li>
</ul>
</body>
</html>