diff options
Diffstat (limited to 'files/de/web/css/font-weight/index.html')
| -rw-r--r-- | files/de/web/css/font-weight/index.html | 276 |
1 files changed, 276 insertions, 0 deletions
diff --git a/files/de/web/css/font-weight/index.html b/files/de/web/css/font-weight/index.html new file mode 100644 index 0000000000..bff759e976 --- /dev/null +++ b/files/de/web/css/font-weight/index.html @@ -0,0 +1,276 @@ +--- +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><number></code></dt> + <dd>Eine Zahl ({{cssxref("<number>")}}) 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"><p> + 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?« +</p> + +<div>Ich bin breiter.<br/> + <span>Ich bin schmaler.</span> +</div> +</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> |