Setting the Font Weight
Description
You can set the weight of the font using the font-weight property. Its possible values are:
- normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Example
The following code uses the font-weight and font-style Properties.
<!DOCTYPE HTML>
<html>
<!-- w w w .ja v a 2 s . co m-->
<head>
<style>
p.one {
font-weight: normal;
}
p.two {
font-weight: bold;
}
p.three {
font-weight: normal;
}
p.three span {
font-weight: bolder;
}
p.four {
font-weight: bold;
}
p.four span {
font-weight: lighter;
}
p.five {
font-weight: 100;
}
p.six {
font-weight: 200;
}
p.seven {
font-weight: 300;
}
p.eight {
font-weight: 400;
}
p.nine {
font-weight: 500;
}
p.ten {
font-weight: 600;
}
p.eleven {
font-weight: 700;
}
p.twelve {
font-weight: 800;
}
p.thirteen {
font-weight: 900;
}
.column {
width: 150px;
float: left;
margin-right: 30px;
}
</style>
</head>
<body>
<h1>Font Weight</h1>
<div class="column">
<p class="one">normal</p>
<p class="two">bold</p>
<p class="three">
<span>bolder</span>.
</p>
<p class="four">
<span>lighter</span>.
</p>
</div>
<div class="column">
<p class="five">100</p>
<p class="six">200</p>
<p class="seven">300</p>
<p class="eight">400</p>
<p class="nine">500</p>
<p class="ten">600</p>
<p class="eleven">700</p>
<p class="twelve">800</p>
<p class="thirteen">900</p>
</div>
</body>
</html>