It is use to sets how thick or thin characters in text.
Syntax -
font-weight: value;
values
normal |
Defines normal characters.(default) |
bold | Defines thick characters. |
bolder | Defines thicker characters. |
lighter |
Defines lighter characters. |
100 200 300 400 500 600 700 800 900 |
Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold |
For example -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font weight</title>
<style>
.para1 {
font-weight: bold;
}
.para2 {
font-weight: lighter;
}
.para3 {
font-weight: 900;
}
</style>
</head>
<body>
<p class="para1"> Teknowize </p>
<p class="para2"> welcome to Teknowize</p>
<p class="para3"> welcome to Teknowize</p>
</body>
</html>
Output