CSS font-weight Property
CSS font-weight property specifies the weight (or boldness) of a font.
Usages
The following table outline the usages and version history of this property.
| Default value: | normal |
| Applies to: | All elements |
| Inherited: | Yes |
| Version: | CSS1 |
| JavaScript Syntax: | object.style.fontWeight = "bolder" |
Syntax
Here is a syntax for the CSS font-weight property
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit;
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| normal | default. Browser displays as normal font weight |
| bold | Browser displays as bold font weight same as 700 |
| bolder | Browser displays darker font weight than its parent element |
| lighter | Browser displays lighter font weight than its parent element |
| 100 200 300 400 500 600 700 800 900 |
Browser displays numeric font weights that provide more than just normal and bold |
| initial | Sets default value of this property |
| inherit | Inherits this property from its parent element |
Examples
The example below shows to sets font weight normal, bold, bolder, lighter values.
p.one {
font-weight: normal;
}
p.two {
font-weight: bold;
}
p.three {
font-weight: bolder;
}
p.four {
font-weight: 100;
}
p.five {
font-weight: 200;
}
p.six {
font-weight: 500;
}
p.seven {
font-weight: 800;
}
p.eight {
font-weight: 900;
}
Browser Compatibility
- Google Chrome 2+
- Mozilla Firefox 1+
- Internet Explorer 4+
- Opera 3.5+
- Safari 1.3+
Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.