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

Recommended Posts: