CSS - font-weight

Advertisements

Previous Page
Next Page  

Description

The font-weight property alters the visual weight of characters in an element.

Possible Values

  • 100, 200, 300, 400, 500, 600, 700, 800 and 900 − Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold.

  • normal − Default. Defines normal characters and equivalent to the value 400.

  • bold − Equivalent to the value 700.

  • bolder − The font characters for the element should be heavier than those of the parent element.

  • lighter − The font characters for the element should be lighter than those of the parent element.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontWeight = "900";

Example

Here is the example using this property −

Live Demo 
<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

This will produce following result −

Advertisements