font-weight

The font-weight CSS 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 [1,1000]>]

normal

Same as 400.

bold

Same as 700.

<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.

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

<!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>

JS

<!doctype html>
<html>
<head>
    <script>
        function myfunction(myvar)
        {
            document.querySelector("p").style.fontWeight = myvar;
        }
    </script>
</head>
<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>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

bold

bolder

lighter

normal

number

JS

Links

Internal

External