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 instance, some font-family is available only in specific weights.
Syntax:
font-weight: normal|bold|lighter|bolder|number|initial|inherit|unset;
Property Values:
- normal: This is the default font-weight & defines the normal 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.
- 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, a suitable weight is applied.
Global Values:
- initial: This sets the font-weight to the 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 an inheritable property.
When lighter or bolder is specified, the below chart shows how the absolute font-weight of the element is determined.
Parent Value |
lighter |
bolder |
|---|---|---|
|
100 |
100 |
400 |
|
200 |
100 |
400 |
|
300 |
100 |
400 |
|
400 |
100 |
700 |
|
500 |
100 |
700 |
|
600 |
400 |
900 |
|
700 |
400 |
900 |
|
800 |
700 |
900 |
|
900 |
700 |
900 |
Example: The following example demonstrates the use of CSS font-weight property in which the property has been set to different values.
HTML
<!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> <h1>GeeksforGeeks</h1> <h3>CSS font-weight Property</h3> <!-- 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 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Safari 1.0
- Opera 3.5
Please Login to comment...