Arrow

CSS Font Weight

AuthorHariom Prajapati

Pubish Date20 Aug 2022

categoryCSS

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