FONT-WEIGHT

The font-weight property specifies the weight of glyphs in the font, their degree of blackness, or stroke thickness.

SYNTAX

CSS


            font-weight: value;

JS


            object.style.fontWeight = "value";

VALUES


            <'font-weight'> = <font-weight-absolute> | bolder | lighter


            <font-weight-absolute> = [normal | bold | <number>]


            normal

Same as 400.


            bold

Same as 700.


            <number>

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.


            100 - Thin


            200 - Extra Light (Ultra Light)


            300 - Light


            400 - Normal


            500 - Medium


            600 - Semi Bold (Demi Bold)


            700 - Bold


            800 - Extra Bold (Ultra Bold)


            900 - Black (Heavy)


            bolder

Specifies a bolder weight than the inherited value.


            lighter

Specifies a lighter weight than the inherited value.

INITIAL

normal

EXAMPLES

BOLD

BOLDER

LIGHTER

NORMAL

NUMBER

JS

<!doctype html>
<html>
<head>
    <script>
        function mouseover(value) {
            document.getElementsByTagName("p")[0].style.fontWeight = value;
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="bold">
    <input onmouseover="mouseover(value)" type="button" value="bolder">
    <input onmouseover="mouseover(value)" type="button" value="lighter">
    <input onmouseover="mouseover(value)" type="button" value="normal"><br>
    <input onmouseover="mouseover(value)" type="button" value="100">
    <input onmouseover="mouseover(value)" type="button" value="200">
    <input onmouseover="mouseover(value)" type="button" value="300">
    <input onmouseover="mouseover(value)" type="button" value="400">
    <input onmouseover="mouseover(value)" type="button" value="500">
    <input onmouseover="mouseover(value)" type="button" value="600">
    <input onmouseover="mouseover(value)" type="button" value="700">
    <input onmouseover="mouseover(value)" type="button" value="800">
    <input onmouseover="mouseover(value)" type="button" value="900">
    <p>font-weight</p>
</body>
</html>