clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Font Weight

Imperial Advance Hero Image

CSS Font Weight

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

Font Weight

CSS