---
title: font-weight
slug: Web/CSS/font-weight
translation_of: Web/CSS/font-weight
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Übersicht</h2>

<p>Die <a href="/en-US/docs/CSS" title="CSS">CSS</a>-Eigenschaft {{Cssxref("font-weight")}} definiert die Stärke der Schrift. Einige Schriftarten sind jedoch nicht in allen Werten verfügbar und unterstützen nur die Werte <code>normal</code> und <code>bold</code>.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-weight")}}</pre>

<pre><code>font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900

font-weight: inherit</code></pre>

<h3 id="Values" name="Values">Werte</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Normale Stärke, entspricht <code>400</code>.</dd>
 <dt><code>bold</code></dt>
 <dd>Fette Schrift, entspricht <code>700</code>.</dd>
 <dt><code>lighter</code></dt>
 <dd>Eine Stufe dünner als das Elternelement (siehe <a href="#relative_angaben">Die Bedeutung relativer Angaben</a> unten).</dd>
 <dt><code>bolder</code></dt>
 <dd>Eine Stufe fetter als das Elternelement (siehe <a href="#relative_angaben">Die Bedeutung relativer Angaben</a> unten).</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>Eine Zahl ({{cssxref("&lt;number&gt;")}}) zwischen 1 und 1000 (einschließlich). Größere Werte stehen für eine fettere oder gleich fette Darstellung als kleinere Werte.</dd>
</dl>

<p>Frühere Spezifikationen erlaubten für <code>font-weight</code> nur die Schlüsselworte sowie die Werte 100 bis 1000 in Hunderterschritten. Nicht-variable Schriftarten können nur mit diesen Werten arbeiten, feinere Abstimmungen werden jedoch mit den festgelegten Werte angenähert.</p>

<p>Die Spezifikation CSS Fonts Level 4 nimmt variable Schriftarten im Format TrueType und OpenType auf. Mit diesen sind grundsätzlich beliebig feine Abstimmungen möglich.</p>

<h3 id="Näherungsverfahren">Näherungsverfahren</h3>

<p>Ist die gewählte Stärke nicht verfügbar, bestimmen die nachfolgenden Schritte die Darstellung:</p>

<ul>
 <li>Liegt die gewünschte Stärke zwischen 400 und 500 (einschließlich):
  <ol>
   <li>Verwende die erste Stärke, die größer als die gewünschte, aber kleiner als 500 ist.</li>
   <li>Ist keine verfügbar, verwende die erste Stärke die kleiner als die gewünschte ist.</li>
   <li>Ist keine verfügbar, verwende die erste Stärke größer als 500.</li>
  </ol>
 </li>
 <li>Liegt die gewünschte Stärke unter 400, verwende die erste Stärke kleiner als die gewünschte. Ist keine verfügbar, verwende die erste Stärke größer als die gewünschte.</li>
 <li>Liegt die gewünschte Stärke über 500, verwende die erste Stärke größer als die gewünschte. Ist keine verfügbar, verwende die erste Stärke kleiner als die gewünschte.</li>
</ul>

<h3 id="Die_Bedeutung_relativer_Angaben"><a name="relative_angaben">Die Bedeutung relativer Angaben</a></h3>

<p>Bei der Angabe von <code>lighter</code> und <code>bolder</code> bestimmt die nachfolgende Tabelle die tatsächliche Schriftstärke. Zu beachten ist, dass hierbei nur vier Abstufungen verfügbar sind, fein (100), normal (400), fett (700) und schwarz (900).</p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Gegeben</th>
   <th><code>bolder</code></th>
   <th><code>lighter</code></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>100</th>
   <td>400</td>
   <td>100</td>
  </tr>
  <tr>
   <th>200</th>
   <td>400</td>
   <td>100</td>
  </tr>
  <tr>
   <th>300</th>
   <td>400</td>
   <td>100</td>
  </tr>
  <tr>
   <th>400</th>
   <td>700</td>
   <td>100</td>
  </tr>
  <tr>
   <th>500</th>
   <td>700</td>
   <td>100</td>
  </tr>
  <tr>
   <th>600</th>
   <td>900</td>
   <td>400</td>
  </tr>
  <tr>
   <th>700</th>
   <td>900</td>
   <td>400</td>
  </tr>
  <tr>
   <th>800</th>
   <td>900</td>
   <td>700</td>
  </tr>
  <tr>
   <th>900</th>
   <td>900</td>
   <td>700</td>
  </tr>
 </tbody>
</table>

<h3 id="Zuordnung_von_Namen_und_Werten">Zuordnung von Namen und Werten</h3>

<p>Die Werte 100 bis 900 entsprechen ungefähr den nachfolgenden Bezeichnungen (siehe <a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass">OpenType-Spezifikation</a> und <a href="https://de.wikipedia.org/wiki/Schriftschnitt#Variation_der_Schriftst%C3%A4rke">Wikipedia-Artikel zur Schriftstärke</a>):</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Wert</th>
   <th scope="col">Deutsch</th>
   <th scope="col">Englisch</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>100</td>
   <td>fein</td>
   <td>Thin (Hairline)</td>
  </tr>
  <tr>
   <td>200</td>
   <td>extraleicht</td>
   <td>Extra Light (Ultra Light)</td>
  </tr>
  <tr>
   <td>300</td>
   <td>leicht</td>
   <td>Light</td>
  </tr>
  <tr>
   <td>400</td>
   <td>normal</td>
   <td>Normal (Regular)</td>
  </tr>
  <tr>
   <td>500</td>
   <td>medium</td>
   <td>Medium</td>
  </tr>
  <tr>
   <td>600</td>
   <td>halbfett</td>
   <td>Semi Bold (Demi Bold)</td>
  </tr>
  <tr>
   <td>700</td>
   <td>fett</td>
   <td>Bold</td>
  </tr>
  <tr>
   <td>800</td>
   <td>extrafett</td>
   <td>Extra Bold (Ultra Bold)</td>
  </tr>
  <tr>
   <td>900</td>
   <td>schwarz</td>
   <td>Black (Heavy)</td>
  </tr>
  <tr>
   <td>950</td>
   <td>extraschwarz</td>
   <td>Extra Black (Ultra Black)</td>
  </tr>
 </tbody>
</table>

<h3 id="Variable_Schriftarten">Variable Schriftarten</h3>

<p>Die meisten Schriftarten stellen nur einige festgelegte Breiten zur Verfügung. Variable Schriftarten unterstützen hingegen eine Vielzahl von Breiten in mehr oder weniger feiner Abstufung.</p>

<p>Bei variablen Schriftarten vom Typ TrueType und OpenType korrespondiert deren Eigenschaft "wght" mit der CSS-Eigenschaft <code>font-weight</code> und wird von Browsern – sofern unterstützt –  entsprechend eingesetzt.</p>

<h2 id="Beispiel">Beispiel</h2>

<pre class="brush: html">&lt;p&gt;
  Alice fing an sich zu langweilen; sie saß schon
  lange bei ihrer Schwester am Ufer und hatte nichts
  zu tun. Das Buch, das ihre Schwester las, gefiel
  ihr nicht, denn es waren weder Bilder noch Gespräche
  darin. »Und was nützen Bücher,« dachte Alice,
  »ohne Bilder und Gespräche?«
&lt;/p&gt;

&lt;div&gt;Ich bin breiter.&lt;br/&gt;
  &lt;span&gt;Ich bin schmaler.&lt;/span&gt;
&lt;/div&gt;
</pre>

<pre class="brush:css">/* Absatz soll breiter sein. */
p {
  font-weight: bold;
}

/* Der Text im div soll zwei Schritte breiter
   als normal sein, aber nicht so breit wie
   ein normales breit (bold). */
div {
 font-weight: 600;
}

/* Der Text im span soll einen Schritt schmaler
   sein als jener seines Elternelements. */
span {
  font-weight: lighter;
}</pre>

<p>{{EmbedLiveSample("Beispiele","400","300")}}</p>

<h2 id="Notes" name="Notes">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td><code>font-weight</code> ist animierbar</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>

<p>{{Compat("css.properties.font-weight")}}</p>