EN
Este conteúdo não está disponível em seu idioma, mas aqui está a versão em inglês.

font-weight property

Specifies the weight of the font of the object.

CSS 2.1, Section 5.2.5

 

Syntax

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

Property values

normal

Font is normal.

bold

Font is bold.

bolder

Font is at least as bold as the default bold weight.

lighter

Font is lighter than normal.

100

Font is at least as light as the 200 weight.

200

Font is at least as bold as the 100 weight and at least as light as the 300 weight.

300

Font is at least as bold as the 200 weight and at least as light as the 400 weight.

400

Font is normal.

500

Font is at least as bold as the 400 weight and at least as light as the 600 weight.

600

Font is at least as bold as the 500 weight and at least as light as the 700 weight.

700

Font is bold.

800

Font is at least as bold as the 700 weight and at least as light as the 900 weight.

900

Font is at least as bold as the 800 weight.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Valuenormal

Standards information

Remarks

Keywords for font-weight values 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 font-weight settings because the system chooses the closest match.

Setting the font-weight to 400 is equivalent to normal, and to 700 is equivalent to bold. An font-weight of bolder or lighter is interpreted relative to the parent object's weight. A value of bolder for text whose parent is normal sets the text to bold.

To convert these strings to numeric equivalents, use the read-only fontWeight property.

Examples

This example uses font-weight to display text in the default body element text font weight (bold), then display text in a lighter font weight.


body {
  font-weight: bold;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.lighter {
  font-weight: lighter;
}


<body>
  <p>Lorem ipsum dolor sit amet... (<em>font-weight: bold</em>)</p>
  <p class="lighter">Lorem ipsum dolor sit amet... (<em>font-weight: lighter</em>)</p>
</body>

The following image shows the result:

An image showing text with different font-weight settings.

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
font

 

 

Mostrar:
© 2014 Microsoft