CSS font-weight is used to set the boldness of the font. Its property values are normal, bold, bolder, lighter, or defined in hundreds like 100, 200, 300,…. up to 900. 100 is the lightest, 400 is the normal font-weight and 700 is the same as bold value.
Font-weight can be defined in number from 100 to 900, which is from lighter to bolder. 100 is the lighter font-weight. 400 is the normal font-weight and 700 is the bolder font-weight. Let see each font-weight output using in number.
5.1) font-weight: 100;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.number{
border: 3px solid black;
background-color: pink;
font-weight: 100;
}
</style>
</head>
<body>
<div class="number">This is a paragraph with font-weight is equal to 100. This font-weight is as same as lighter.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.number{
border: 3px solid black;
background-color: pink;
font-weight: 400;
}
</style>
</head>
<body>
<div class="number">This is a paragraph with font-weight is equal to 400. 400 is the same as normal.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.initial{
border: 3px solid black;
background-color: pink;
font-variant: initial;
}
</style>
</head>
<body>
<div class="initial">This is a paragraph, where the fonts are matched to its default value.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.inherit{
border: 3px solid black;
background-color: pink;
font-variant: inherit;
}
</style>
</head>
<body>
<div class="inherit">This is a paragraph, where its property is inherited from its parent value.</div>
</body>
</html>