Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The font-weight property
Another font parameter that we can control is the font weight or stroke thickness of the font. The stroke thickness of the font can be thicker or thinner than the normal setting. We can set the font weight using the font-weight
property. You can use a keyword or a number as a value. The most commonly used values are:
400
ornormal
— Regular font with a default value;700
orbold
— Bold font.
For example:
h1 {
font-weight: 400; /* The same as normal */
}
p {
font-weight: bold; /* The same as 700 */
}
In fact, font-weight
can be assigned one of nine possible numbers for font weight:
- 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).
All these numeric values set the degree of font stroke thickness, from the very thinnest to the very thickest.
But for most system fonts, there are only two possible stroke thicknesses: normal
(400) and bold
(700). Therefore, the other property values are used less frequently. If the font does not have the specified weight, there is a defined fallback weight algorithm.
In addition to the above numeric values for font-weight
, there may be two other relative values: bolder
and lighter
. These values make the font bolder and thinner than the current or inherited value.
- day-2.html
- style.css
Thanks! We’ll fix everything at once!
Comments