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 the value inherited from its parent element, since font-weight is a inheritable property.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right






                        filter_none








Output:

CSS Property: font-weight


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.



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Husban
Student, BCA
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.