font-weight
CSS font-weight Property
The font-weight property is used to set the boldness and thickness of the font. But there are some fonts that do not set all weights. They are only available on normal or bold.
Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700.
| 类目 | 类目 |
|---|---|
| Initial Value | normal |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | CSS1 |
| DOM Syntax | object.style.fontWeight = “bolder”; |
Syntax
Syntax
font-weight: normal | bold | bolder | lighter | number | initial | inherit;
Example of the font-weight property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="bolder">We used a bolder text here.</p>
</body>
</html>
Result
Example of the font-weight property with all the values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
p.fweight {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="normal">We used normal weight here.</p>
<p class="lighter">This is a lighter weight.</p>
<p class="bold">We used bold weight here.</p>
<p class="bolder">We used a bolder text here.</p>
<p class="fweight">We set font-weight 600 here.</p>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| normal | Means that text characters will be normal. This is the default value of this property. | Play it » |
| bold | Defines thick characters. | Play it » |
| bolder | Defines thicker characters in the text. | Play it » |
| lighter | Defines lighter characters. | Play it » |
| 100200300400500600700800900 | We can use these values to set text characters from thin to bold. 400 is same weight normal, while 700 makes the characters same with bold. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |