CSS font-weight property specifies the weight or boldness of the font.
Example:
.p1{
font-weight: normal;
}
.p2{
font-weight: bold;
}
.p3{
font-weight: bolder;
}
You can also use a numeric value to specify the font weight. Each numeric value corresponds to a particular font weight. For example, 400 is same as normal, 700 is same as bold, and 800 is same as bolder and so on. See the example below:
Example:
.p1{
font-weight: 400;
}
.p2{
font-weight: 700;
}
.p3{
font-weight: 800;
}
CSS Syntax
The font-weight property has the following syntax:
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Property Values
The font-weight property accepts the following values:
| normal | This is the default value. The text is displayed normally. |
| bold | Specifies a bold font weight. |
| bolder | Specifies a font weight higher than the bold fonts. |
| lighter | Specifies a lighter font weight. |
| number | 100(Thin) 200(Extra Light) 300(Light) 400(Normal) 500(Medium) 600(Semi Bold) 700(Bold) 800(Extra Bold) 900(Ultra Bold) |
| initial | Sets the font-weight property to its default value(normal). |
| inherit | Inherits the font-weight property from the parent element. |
General Info
| Default Value | normal |
| Inherited | Yes |
| JavaScript Usage | element.style.fontWeight = “bold”; |
