CSS | font-weight Property
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.
Syntax:
font-weight: normal | bold | lighter | bolder | number | initial | inherit | unset;
Keyword Values:
- 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.
Numeric Values:
- 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.
Global Values:
- 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.
Example:
<!DOCTYPE html> < html > < head > < title > font-weight property </ title > <!-- font-weight CSS property --> < style > body{ font-weight: bold; font-family: sans-serif; } p.one{ font-weight: bold; } p.two{ font-weight: lighter; } p.three{ font-weight: 1000; } p.four{ font-weight: initial; } </ style > </ head > < body > <!-- font-weight: bold; length; property --> < p class = "one" > Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </ p > <!-- font-weight: lighter; length; property --> < p class = "two" > Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </ p > <!-- font-weight: 1000; length; property --> < p class = "three" > Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </ p > <!-- font-weight: initial; length; property --> < p class = "four" > Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </ p > </ body > </ html > |
Output:
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.
Recommended Posts:
- HTML | DOM Style fontWeight Property
- CSS | transition-property Property
- CSS | all Property
- CSS | nav-up property
- CSS | nav-right property
- CSS | top Property
- CSS | right Property
- CSS | nav-down property
- CSS | align-self Property
- CSS | cursor property
- CSS overflow-y Property
- CSS | transition Property
- CSS | left Property
- CSS | clip Property
- CSS | perspective 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 contribute@geeksforgeeks.org. 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