This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

fontWeight

Summary

Gets or sets the weight of the font of the object.

Property of css/cssom/CSSStyleDeclaration/CSSStyleDeclarationcss/cssom/CSSStyleDeclaration/CSSStyleDeclaration

Syntax

var fontWeightValue = declaration.fontWeight;
declaration.fontWeight = fontWeightValue;

Return Value

Returns an object of type StringString

The current state of the value of the font-weight CSS property.

Examples

The following example demonstrates how to set the fontWeight property of a p element. The script reads the fontWeight property of the currentStyle object and displays the value in a span element.

<body onload="setInterval('s1.innerText = p1.currentStyle.fontWeight',200)">
<p id="p1">Click the buttons below.</p>
<button onclick="p1.style.fontWeight='lighter';">Lighter</button>
<button onclick="p1.style.fontWeight='normal';">Normal</button>
<button onclick="p1.style.fontWeight='bold';">Bold</button>
<button onclick="p1.style.fontWeight='bolder';">Bolder</button>
<br>Current Weight: <span id="s1"></span>
</body>

View live example

Notes

The fontWeight property of the currentStyle object is read-only. To set the value, use the fontWeight property of the style object. Unlike the style object, the fontWeight property of the currentStyle object only returns numeric values. Unlike fontWeight, fontWeight is read-only and returns only numeric values. The values for fontWeight are mapped to specific font variations, depending on the fonts that are installed on the user’s computer. In many cases, the user cannot see the difference between different fontWeight settings because the system chooses the closest match.

Syntax

fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

See also

Related articles

CSSOM

Related pages

Attributions