CSS font-weight Property :
The font-weight property defines how bold the text appears. This can be a simple value like normal or bold. It can also take numeric values: 100, 200, 300, 400, 500, 600, 700, 800, and 900.
The higher the number, the bolder the font is. The normal value is equivalent to a weight of 400, and the bold value is equivalent to a weight of 700.
Depending on the font used, not all weights may be available.
font-weight can also be specified as the values lighter or bolder.
These values are relative to the weight of the element's parent.
Syntax -
|
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
Now we will see the values with example -
Example -
|
Value |
Description |
|
normal |
This defines normal characters. This is default |
|
bold |
This defines thick characters |
|
bolder |
This defines thicker characters |
|
lighter |
This defines lighter characters |
|
100
200 300 400 500 600 700 800 900 |
Values can be set with named values (normal or bold) or with numbered values (100–900). In practice, under most browsers the values 100–500 display as normal text; 600–900 display as bold. Relative values of lighter or bolder will increase or decrease the font-weight value relative to its surrounding weight. 700 is the same as bold.
|
Now we will see the example -
Example -
Output :
