The font-weight property of the CSS is used to set the weight or thickness of the font being used with the HTML Text. The font weight applied will depend on font-family used and the browser. For example, some font-family are available only in specific weights.
font-weight: normal | bold | lighter | bolder | number | initial | inherit | unset;
- normal: This defines the normal font weight (default font weight). It is equal to the number value 400.
- bold: This defines the bold font weight, it is equal to the number value 700.
Relative Keyword Values:
- lighter: This makes the font weight one level lighter than the parent element, considering the available font weights of the font family.
- bolder: This makes the font weight one level heavier than the parent element, considering the available font weights of the font family.
- number: This sets the font weight according to the number specified. The number can range between 1 to 1000. If the exact weight is unavailable, suitable weight is applied.
- initial: This sets the font weight to initial(default) value.
- inherit: This sets the font weight equal to the value inherited from its parent element.
- unset: This sets the font weight equal to the value inherited from its parent element, since font-weight is a inheritable property.
Supported Browsers: The browser supported by CSS | font-weight Property are listed below:
- Google Chrome 2.0
- Internet Explorer 4.0
- Firefox 1.0
- Safari 1.3
- Opera 3.5
Reference: Mozilla Developer Network (MDN)
Please comment below, if you found any errors, or have suggestions for improvements.
- HTML | DOM Style fontWeight Property
- CSS | transition-property Property
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- CSS | table-layout Property
- CSS | text-align Property
- CSS | border-top-width Property
- CSS | isolation Property
- CSS | border-inline-start-style Property
- CSS | column-rule-width Property
- CSS | word-spacing Property
- CSS | animation-delay Property
- CSS | margin-top Property
- CSS | border radius property
- CSS | grid Property
- CSS | font-size-adjust Property
- CSS | visibility Property
- CSS | Display property
- CSS | grid-template-columns Property
- CSS | height Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
Improved By : Akanksha_Rai