mozilla

Revision 20326 of font-weight

  • Revision slug: CSS/font-weight
  • Revision title: font-weight
  • Revision id: 20326
  • Created:
  • Creator: Backinblakk
  • Is current revision? No
  • Comment Ported from http://zenit.senecac.on.ca/wiki/index.php/CSS_GUIDE_FONT_WEIGHT

Revision Content

{{template.CSSRef()}}

Summary

The font-weight property is used to control the weight or boldness of a font for a defined section. The weight can be declared absolutely or relatively to the parent or user's default font size.

  • Initial value: normal
  • Applies to: all elements
  • Inherited: yes
  • Media: Visual
  • Computed value: One of the numeric values (100, etc.), or one of the numeric values plus one of the relative values (bolder or lighter)

Syntax

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

Values

Values can be entered 3 ways.

MethodRangeExample
Numeric Value100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900'400' represents normal weight, '700' represents bold weight
Relative Weightlighter | bolder(Relative to parent or user font table)
Boolean Weightnormal | boldSets weight to either normal or bold

Examples

{{template.CSSRefExampleLink("font-weight")}}

p{font-weight: bold}  /*Set paragraph text to be bold.*/

h1{font-weight: 500}  /*Set h1 (level 1 heading) text to one step darker than normal but less than a standard bold.*/

span{font-weight: lighter}  /*Sets text enclosed within span tag to be one step lighter than the parent or user font table*/

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 3
Netscape 4
Opera 3.5

See also

{{template.Cssxref("font")}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The font-weight property is used to control the weight or boldness of a font for a defined section. The weight can be declared absolutely or relatively to the parent or user's default font size.
</p>
<ul><li> Initial value: normal
</li><li> Applies to: all elements
</li><li> Inherited: yes
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li><li> Computed value: One of the numeric values (100, etc.), or one of the numeric values plus one of the relative values (bolder or lighter)
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval"> element { font-weight:  normal | bold | bolder | lighter 
 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit }
</pre>
<h3 name="Values"> Values </h3>
<p>Values can be entered 3 ways.
</p>
<table class="standard-table">
<tbody><tr>
<th>Method</th><th>Range</th><th>Example</th>
</tr>
<tr>
<td>Numeric Value</td><td>100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</td><td>'400' represents normal weight, '700' represents bold weight</td>
</tr>
<tr>
<td>Relative Weight</td><td>lighter | bolder</td><td>(Relative to parent or user font table)</td>
</tr>
<tr>
<td>Boolean Weight</td><td>normal | bold</td><td>Sets weight to either normal or bold</td>
</tr>
</tbody></table>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("font-weight")}}
</p>
<pre>p{font-weight: bold}  /*Set paragraph text to be bold.*/

h1{font-weight: 500}  /*Set h1 (level 1 heading) text to one step darker than normal but less than a standard bold.*/

span{font-weight: lighter}  /*Sets text enclosed within span tag to be one step lighter than the parent or user font table*/
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#font-weight">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-boldness">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-fonts/#font-styling">CSS 3</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("font")}}
</p>
Revert to this revision