font-weight (CSS property)

Spec
Inherited Initial Version
Yes normal CSS1, 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

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

Description

This property sets the font weight that’s applied to the text content of an element.

Note that many common computer fonts are only available in a limited number of weights (often, the only options are normal and bold).

Example

This style rule makes emphasized elements display with a bolder weight than that of their parent elements:

em {
  font-weight: bolder;
}

Value

A font face often has descriptive names for the different weights within that font (e.g. Regular, Light ) and as there is no accepted, universal meaning to these weight names, the weight property values in CSS 2.1 are given on a numerical scale. The numeric values 100900 specify font weights where each number represents a weight equal to or darker than its predecessor. 400 is considered the “normal” weight. If the specified font isn’t available in the specified weight, the font weight will be mapped to a suitable existing value.

The following keywords can also be used for this property:

bold
is a synonym for 700
bolder
selects a font weight that’s darker than that inherited from the parent element
lighter
selects a font weight that’s lighter than that inherited from the parent element
normal
is a synonym for 400

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

User-contributed notes

ID:
#1
Contributed:
by clagnut
Date:
Thu, 13 Nov 2008 14:44:43 GMT

I would argue that none of the browsers listed support font-weight to a 'full' standard, as none support the numerical scale. Currently only Firefox 3 and Webkit nightlies support numbers as values of font-weight. For more information see http://blog.gesteves.com/post/36097597/helvetica-neue-light

Related Products