CSS font-weight Property - GeeksforGeeks

11 Oct, 2021
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.
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
Akanksha_Rai
ManasChhabra2
bhaskargeeksforgeeks
CSS-Properties
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript