The font-weight property for CSS specifies the weight of glyphs in the font, their degree of blackness, or stroke thickness.
object.style.fontWeight = "value"; <'font-weight'> = <font-weight-absolute> | bolder | lighter <font-weight-absolute> = [normal | bold | <number [1,1000]>] <number [1,1000]> Each number indicates a weight that is at least as dark as its predecessor. Only values greater than or equal to 1, and less than or equal to 1000, are valid, and all other values are invalid.
200 - Extra Light (Ultra Light) 600 - Semi Bold (Demi Bold) 800 - Extra Bold (Ultra Bold) bolder Specifies a bolder weight than the inherited value.
lighter Specifies a lighter weight than the inherited value.
<!doctype html>
<html>
<head>
<style>
p
{
font-weight: bolder;
}
</style>
</head>
<body>
<p>bolder</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-weight: lighter;
}
</style>
</head>
<body>
<p>lighter</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-weight: normal;
}
</style>
</head>
<body>
<p>normal</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.number1
{
font-weight: 1;
}
.number100
{
font-weight: 100;
}
.number200
{
font-weight: 200;
}
.number300
{
font-weight: 300;
}
.number400
{
font-weight: 400;
}
.number500
{
font-weight: 500;
}
.number600
{
font-weight: 600;
}
.number700
{
font-weight: 700;
}
.number800
{
font-weight: 800;
}
.number900
{
font-weight: 900;
}
.number1000
{
font-weight: 1000;
}
</style>
</head>
<body>
<p class="number1">1</p>
<p class="number100">100</p>
<p class="number200">200</p>
<p class="number300">300</p>
<p class="number400">400</p>
<p class="number500">500</p>
<p class="number600">600</p>
<p class="number700">700</p>
<p class="number800">800</p>
<p class="number900">900</p>
<p class="number1000">1000</p>
</body>
</html>
<!doctype html>
<html>
<body>
<button>initial</button><br>
<button>bold</button>
<button>bolder</button>
<button>lighter</button>
<button>normal</button><br>
<button>1</button>
<button>100</button>
<button>200</button>
<button>300</button>
<button>400</button>
<button>500</button>
<button>600</button>
<button>700</button>
<button>800</button>
<button>900</button>
<button>1000</button>
<p>font-weight</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.fontWeight = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>