Der mit font-weight: bold fett gesetzten Schrift geht es im Internet wie den Kapitälchen: Sie wird vom Browser dicker dargestellt – der Grafiker oder Setzer würde einen »echten« Fettschnitt lieber sehen.
So bietet die CSS-Eigenschaft font-weight zwar eine Auswahl von mager über normal bis fett und sehr fett, aber die gewählte Schrift muss über verschiedene Schnitte in den jeweiligen Abstufungen verfügen. Bei den mitgelieferten Schriften wie Arial, Helvetica und Times ist das nicht unbedingt der Fall.
Arial bold :Fette Schrift kann sich ganz schön dick machen
Arial Black: Fette Schrift kann sich ganz schön dick machen
Arial Narrow: Fette Schrift kann sich ganz schön dick machen
Selbst wenn auf dem Rechner des Besuchers verschiedene Fettschnitte installiert waren, hätten die meisten Browser diese Schnitte nicht erkannt: Sicher erkennen sie nur normal und bold als Schriftgewicht.
Hier liegen also keine unterschiedlichen Fettschnitte vor (falls die Schriften beim Besucher installiert sind), sondern echt fette Schriften:
<p style="font-family:'Arial'; font-weight: bold;">Fette Schrift kann … </p> <p style="font-family:'Arial Black';">Fette Schrift kann … </p> <p style="font-family:'Arial Narrow Black';">Fette Schrift kann … </p>
font-weight:bold per Farbe
Früher bliebt dem Webdesigner nur der Trick, auf unterschiedliche Helligkeiten zur unterschiedlichen Betonung von fetten Hervorhebungen zurückzugreifen.
Fette Schrift kann sich ganz schön dick machen
Fette Schrift kann sich ganz schön dick machen
Fette Schrift kann sich ganz schön dick machen
Fette Schrift kann sich ganz schön dick machen
Mit Webfonts sind heute die Abstufungen möglich, die schon in CSS1 verankert waren, aber nie eingesetzt werden konnten. Vorraussetzung ist aber immer noch, dass die verschiedenen Fettschnitte für die Schrift vorhanden sind. EXO 2 von Natanael Gama aus den Google Webfonts bringt 18 Schriftschnitte mit:
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,300,200,600,800,900,500' rel='stylesheet'>
Schrift kann sich dick und dünn machen (200)
Schrift kann sich dick und dünn machen (300)
Schrift kann sich dick und dünn machen (normal / 400)
Schrift kann sich dick und dünn machen (600)
Schrift kann sich dick und dünn machen (800)
Schrift kann sich dick und dünn machen (900)
CSS font-weight 100 bis 900
- font-weight
- stellt die Schrift fett oder in verschiedenen Abstufungen von fett dar.
- Werte
- normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- normal
- ist die Voreinstellung. Auf der numerischen Skala von 100 bis 900 wird normal üblicherweise bei 400 angesiedelt. Die Angabe von normal stellt sicher, dass keine vorangegangene Deklaration die Darstellung des Textes beeinflusst.
- bold
- entspricht der Darstellung im <b>-Tag von HTML. Auf der numerischen Skala von 100 bis 900 ist bold üblicherweise bei 700 angesiedelt.
- bolder
- stellt die Buchstaben um eine Stufe fetter dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.
- lighter
- stellt die Buchstaben um eine Stufe weniger fett dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform/Browser bestimmt.
- 100 ... 900
- stellt die Buchstaben in 9 Stufen von fett dar. Je größer der Wert ist, umso fetter wird der Text dargestellt. Auf der numerischen Skala von 100 bis 900 entspricht 400 normal und 700 bold. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.
normal, bold, bolder und lighter
p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: bolder; }
oder
<span style="font-weight: lighter">lighter</span>
<span style="font-weight: bolder;">bolder</span>
<span style="font-weight: 100;">100 </span>
lighter normal bold bolder 100 200 300 400 500 600 700 800 900
Die feinen Schritte zwischen verschiedenen Fettschnitten sind erst durch Webfonts möglich. Schriften, die eine so große Zahl von Schnitten bieten, sind selten. Hier steckt also die Schrift »EX0 2« aus den Google Webfonts hinter den Stufen 200, 300 bis 900 für fette Schrift auf Webseiten.