The font-weight property is used in CSS and certain HTML elements. It is used to specify the weight or boldness of the text, or font.
Values[]
| Value | Description |
|---|---|
100 200 300 400 500 600 700 800 900 |
These numbers are used to provide a more specific amount of boldness to the font. 100-500 are for a lighter weight, while 600-900 are used for a heavier weight.
|
normal |
Normal font weight, same as the 400 value.
|
bold |
Bold font weight, same as the 700 value.
|
lighter |
One font weight lighter than the parent element. |
bolder |
One font weight darker than the parent element. |
HTML example:
<span style="font-family:Arial; font-weight:normal;">Normal font.</span>
That will produce: Normal font.
This is font with the bold value applied: Bold font.
This is font with the lighter value applied: Lighter font.
This is font with the bolder value applied: Bolder font.
This is font with the 100 value applied: 100 font.
This is font with the 900 value applied: 900 font.
CSS example:
h1 {
font-family:Arial;
font-weight:normal;
}