Easy Tutorial
❮ Met Win Moveby Prop Reset Type ❯

Style fontWeight Property


Definition and Usage

The fontWeight property sets or returns the thickness of the font.

Syntax

Set the fontWeight property:

Return the fontWeight property:

Value Description
normal Default. The font is normal.
lighter Defines a lighter font.
bold Defines a bold font.
bolder Defines a bolder font.
100 <br>200 <br>300 <br>400 <br>500 <br>600 <br>700 <br>800 <br>900 Defines characters from thin to thick. 400 is equivalent to normal, and 700 is equivalent to bold.
inherit The value of the fontWeight property is inherited from the parent element.

Browser Support

All major browsers support the fontWeight property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to support "inherit". IE9 supports "inherit".


Example

Change the font weight:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function displayResult(){
    document.getElementById("p1").style.fontWeight="900";
}
</script>
</head>
<body>

<p id="p1">This is some text.</p>
<br>
<button type="button" onclick="displayResult()">Change font weight</button>

</body>
</html>

❮ Met Win Moveby Prop Reset Type ❯