font-weight

  • Revision slug: CSS/font-weight
  • Revision title: font-weight
  • Revision id: 340857
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}}

Summary

The {{Cssxref("font-weight")}} CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

  • {{Xref_cssinitial}} {{Cssxref("normal")}}
  • Applies to all elements
  • {{Xref_cssinherited}} yes
  • Media {{Xref_cssvisual}}
  • {{Xref_csscomputed}} One of the numeric values (100, …), or one of the numeric values followed by one of the relative values (bolder or lighter)

Syntax

Formal syntax: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight: normal
font-weight: 700
font-weight: inherit

Values

normal
Normal font weight. Same as 400.
bold
Bold font weight. Same as 700.
lighter
One font weight lighter than the parent element (among the available weights of the font).
bolder
One font weight darker than the parent element (among the available weights of the font).
100, 200, 300, 400, 500, 600, 700, 800, 900
Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Examples

{{CSSLiveSample('font-weight.html')}}

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

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

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

Specifications

Specification Status Comment
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}} {{Spec2('CSS3 Fonts')}} No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}} {{Spec2('CSS3 Transitions')}} Defines font-weight as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} {{Spec2('CSS2.1')}} No change.
{{SpecName('CSS1', '#font-weight', 'font-weight')}} {{Spec2('CSS1')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 {{CompatGeckoDesktop(1.0)}} 3.0 3.5 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{CompatGeckoMobile(1.0)}} 6.0 6.0 3.1

See also

  • {{CSS_Reference:Fonts}}

Revision Source

<div>{{CSSRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The {{Cssxref("font-weight")}} <a href="/en-US/docs/CSS" title="CSS">CSS</a> property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on <code>normal</code> and <code>bold</code>.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}}</dfn> {{Cssxref("normal")}}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{Xref_cssinherited}}</dfn> yes</li>
  <li><dfn>Media</dfn> {{Xref_cssvisual}}</li>
  <li><dfn>{{Xref_csscomputed}}</dfn> One of the numeric values (<code>100</code>, …), or one of the numeric values followed by one of the relative values (<code>bolder</code> or <code>lighter</code>)</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal syntax: <code>normal</code> | <code>bold</code> | <code>bolder</code> | <code>lighter</code> | <code>100</code> | <code>200</code> | <code>300</code> | <code>400</code> | <code>500</code> | <code>600</code> | <code>700</code> | <code>800</code> | <code>900</code></pre>
<pre>
<code>
font-weight: normal
font-weight: 700
font-weight: inherit
</code></pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>normal</code></dt>
  <dd>
    Normal font weight. Same as <code>400</code>.</dd>
  <dt>
    <code>bold</code></dt>
  <dd>
    Bold font weight. Same as <code>700</code>.</dd>
  <dt>
    <code>lighter</code></dt>
  <dd>
    One font weight lighter than the parent element (among the available weights of the font).</dd>
  <dt>
    <code>bolder</code></dt>
  <dd>
    One font weight darker than the parent element (among the available weights of the font).</dd>
  <dt>
    <code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
  <dd>
    Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then <code>600</code>-<code>900</code> use the closest available darker weight (or, if there is none, the closest available lighter weight), and <code>100</code>-<code>500</code> use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only <code>normal</code> and <code>bold</code>, <code>100</code>-<code>500</code> are normal, and <code>600</code>-<code>900</code> are bold.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>{{CSSLiveSample('font-weight.html')}}</p>
<pre class="brush:css">
/* Set paragraph text to be bold. */
p { font-weight: bold; }

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

/* Sets text enclosed within span tag to be one step lighter
   than the parent. */
span { font-weight: lighter; }</pre>
<h2 id="Notes" name="Notes">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
      <td>{{Spec2('CSS3 Fonts')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
      <td>{{Spec2('CSS3 Transitions')}}</td>
      <td>Defines <code>font-weight</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
      <td>{{Spec2('CSS1')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.0</td>
        <td>{{CompatGeckoDesktop(1.0)}}</td>
        <td>3.0</td>
        <td>3.5</td>
        <td>1.3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoMobile(1.0)}}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{CSS_Reference:Fonts}}</li>
</ul>
Revert to this revision