mozilla

Revision 472491 of font-weight

  • Revision slug: Web/SVG/Attribute/font-weight
  • Revision title: font-weight
  • Revision id: 472491
  • Created:
  • Creator: dhaval
  • Is current revision? Yes
  • Comment

Revision Content

« SVG Attribute reference home

The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("font-weight","CSS font-weight") }} for further information.

Usage context

Categories Presentation attribute
Value normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

css

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

html

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

 

Elements

The following elements can use the font-weight attribute

See also

  • {{ cssxref("font-weight","CSS font-weight") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>font-weight</code> attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("font-weight","CSS font-weight") }} for further information.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Presentation attribute</td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><strong>normal</strong> | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit</td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#FontWeightProperty" title="http://www.w3.org/TR/SVG11/text.html#FontWeightProperty">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<h3>css</h3>
<pre class="brush: css">
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}</pre>
<h4>html</h4>
<pre class="brush: html">
&lt;p class="normal"&gt;This is a paragraph.&lt;/p&gt;
&lt;p class="light"&gt;This is a paragraph.&lt;/p&gt;
&lt;p class="thick"&gt;This is a paragraph.&lt;/p&gt;
&lt;p class="thicker"&gt;This is a paragraph.&lt;/p&gt;</pre>
<h3>&nbsp;</h3>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>font-weight</code> attribute</p>
<ul>
  <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a>&nbsp;»</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ cssxref("font-weight","CSS font-weight") }}</li>
</ul>
Revert to this revision