CSS Property font-weight








This property sets the font weight. The numeric value 400 is equivalent to the keyword normal, and 700 is equivalent to bold.

Summary

ItemValue
Initial value normal
Inherited Yes.
Version CSS1
JavaScript syntax object.style.fontWeight="900"
Applies to All elements.




CSS Syntax

font-weight: normal | 
             bold | 
             bolder | 
             lighter | 
             100 | 
             200 | 
             300 | 
             400 | 
             500 |   
             600 | 
             700 | 
             800 | 
             900 |  
             inherit




Property Values

The property values are listed in the following table.

Value Description
normal normal characters. Default value
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100 Defines from thin to thick characters. normal equals 400 , 700 is bold
200 Defines from thin to thick characters. normal equals 400 , 700 is bold
300 Defines from thin to thick characters. normal equals 400 , 700 is bold
400 Defines from thin to thick characters. normal equals 400 , 700 is bold
500 Defines from thin to thick characters. normal equals 400 , 700 is bold
600 Defines from thin to thick characters. normal equals 400 , 700 is bold
700 Defines from thin to thick characters. normal equals 400 , 700 is bold
800 Defines from thin to thick characters. normal equals 400 , 700 is bold
900 Defines from thin to thick characters. normal equals 400 , 700 is bold
inherit Inherit the font weight from the parent element

Browser compatibility

font-weight Yes Yes Yes Yes Yes

Example

The following uses different font weight value to set font-weight.

b {font-weight: 700;} 
strong {font-weight: bold;} 
.delicate {font-weight: lighter;}
<!DOCTYPE HTML>
<html>
<head>
<style>
a:link {<!--   w w  w  . j a v a2 s  .co  m-->
 font-weight: bold;
 text-decoration: none;
 color: red;
}
a:visited {
 font-weight: bold;
 text-decoration: line-through;  
 color: black;
}
</style>
</head>
<body>
  <ul>
    <li><a href=" ">A</a></li> 
    <li><a href=" ">B</a></li>
    <li><a href=" ">C</a></li> 
    <li><a href=" ">java2s.com</a></li> 
  </ul>
</body>
</html>

Click to view the demo