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:

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.


Improved By :  Akanksha_Rai