From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/font-weight/index.html | 276 ++++++++++++++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 files/de/web/css/font-weight/index.html (limited to 'files/de/web/css/font-weight/index.html') 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 +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS-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 normal und bold.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("font-weight")}}
+ +
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
+ +

Werte

+ +
+
normal
+
Normale Stärke, entspricht 400.
+
bold
+
Fette Schrift, entspricht 700.
+
lighter
+
Eine Stufe dünner als das Elternelement (siehe Die Bedeutung relativer Angaben unten).
+
bolder
+
Eine Stufe fetter als das Elternelement (siehe Die Bedeutung relativer Angaben unten).
+
<number>
+
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.
+
+ +

Frühere Spezifikationen erlaubten für font-weight 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.

+ +

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.

+ +

Näherungsverfahren

+ +

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

+ + + +

Die Bedeutung relativer Angaben

+ +

Bei der Angabe von lighter und bolder 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).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Gegebenbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

Zuordnung von Namen und Werten

+ +

Die Werte 100 bis 900 entsprechen ungefähr den nachfolgenden Bezeichnungen (siehe OpenType-Spezifikation und Wikipedia-Artikel zur Schriftstärke):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertDeutschEnglisch
100feinThin (Hairline)
200extraleichtExtra Light (Ultra Light)
300leichtLight
400normalNormal (Regular)
500mediumMedium
600halbfettSemi Bold (Demi Bold)
700fettBold
800extrafettExtra Bold (Ultra Bold)
900schwarzBlack (Heavy)
950extraschwarzExtra Black (Ultra Black)
+ +

Variable Schriftarten

+ +

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.

+ +

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

+ +

Beispiel

+ +
<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>
+
+ +
/* 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;
+}
+ +

{{EmbedLiveSample("Beispiele","400","300")}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Keine Änderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}font-weight ist animierbar
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}
+ +

Browserkompatibilität

+ +

{{Compat("css.properties.font-weight")}}

-- cgit v1.2.3-54-g00ecf