/

HTML / CSS / JavaScript Tutorial

CSS Property: font-weight

[this page | pdf | back links]

The CSS (CSS1) font-weight property indicates how thick or thin (i.e. bold or not) characters should be in the text of an element.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

100, 200, 300, 400, 500, 600, 700, 800, 900

Number selects from very thin to very thick (400 is normal, 700 is bold)

bold

Bold text

bolder

Very bold text

lighter

Lighter text

normal

(default value). Normal text

 

Default Value:

normal

JavaScript syntax:

e.g. object.style.fontWeight="bold"

Inherited:

Yes

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 100px; border: 1px dotted black;}
.x1 {font-weight: bold;}
</style>
</head>
<body>
Element with default property<br>
<div>abcdefgh</div><br>
Property set using in-file HTML style<br>
<div class="x1">abcdefgh</div><br>
Property set using JavaScript<br>
<div id="x2">abcdefgh</div>

<script>
document.getElementById("x2").style.fontWeight = "bold";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyFontWeight() {
  var x = document.createElement("DIV"); x.style.fontWeight = "bold"; return (window.getComputedStyle(x, null).fontWeight == "bold");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile