The font-weight CSS property 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 onmouseover="myfunction(innerHTML)">initial</button><br>
<button onmouseover="myfunction(innerHTML)">bold</button>
<button onmouseover="myfunction(innerHTML)">bolder</button>
<button onmouseover="myfunction(innerHTML)">lighter</button>
<button onmouseover="myfunction(innerHTML)">normal</button><br>
<button onmouseover="myfunction(innerHTML)">1</button>
<button onmouseover="myfunction(innerHTML)">100</button>
<button onmouseover="myfunction(innerHTML)">200</button>
<button onmouseover="myfunction(innerHTML)">300</button>
<button onmouseover="myfunction(innerHTML)">400</button>
<button onmouseover="myfunction(innerHTML)">500</button>
<button onmouseover="myfunction(innerHTML)">600</button>
<button onmouseover="myfunction(innerHTML)">700</button>
<button onmouseover="myfunction(innerHTML)">800</button>
<button onmouseover="myfunction(innerHTML)">900</button>
<button onmouseover="myfunction(innerHTML)">1000</button>
<p>font-weight</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.fontWeight = myparameter;
}
</script>
</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;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>