Font weight

The font-weight property is used to specify the font weight(boldness or lightness) the browser uses to render the characters.

The values of font-weight are.

ValueDescription
normalequal to '400'
boldequal to '700'
bolderthe next darker value upto '900'
lighterthe next lighter value down to '100'
100|200|300|400|500|600|700|800|900
inherit inherited from the parent


example
 font-weight : bold
font-weight : bolder

snippet
<html>
<head>
<style>
div {font-style:normal; font-family:Arial}
</style>
</head>
<body>
<div>
<span style="font-weight:normal">font-weight : normal</span>
<span style="font-weight:bold">font-weight : bold</span>
<span style="font-weight:bolder">font-weight : bolder</span>
<span style="font-weight:lighter">font-weight : lighter</span>
<span style="font-weight:100">font-weight : 100</span>
<span style="font-weight:200">font-weight : 200</span>
<span style="font-weight:300">font-weight : 300</span>
<span style="font-weight:400">font-weight : 400</span>
<span style="font-weight:600">font-weight : 600</span>
<span style="font-weight:900">font-weight : 900</span>
</div>
</body>
</html>

Output
font-weight : normal font-weight : bold font-weight : bolder font-weight : lighter font-weight : 100 font-weight : 200 font-weight : 300 font-weight : 400 font-weight : 600 font-weight : 900
Related Tutorial
1. Fonts
8. Font
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #