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

Examples

1 · bold

2 · bolder

3 · lighter

4 · normal

5 · number

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

6 · JS · Inline

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

7 · JS · Internal

Links

Properties

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timing-function

backdrop-filter

backface-visibility

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

column-rule-color

column-rule-style

column-rule-width

content-visibility

counter-increment

font-feature-settings

font-optical-sizing

font-size-adjust

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

image-rendering

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

max-inline-size

min-inline-size

object-position

overflow-clip-margin

overflow-inline

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

External

World Wide Web Consortium (W3C)

Home