Websiteentwicklung: CSS: Schriftgewicht
Mit der Eigenschaft font-weight kann die Schriftstärke beeinflusst werden.
Repräsentationen von Glyphen bestehen aus Strichen oder Kurven mit einer gewissen Breite, die allerdings nicht exakt konstant sein muß.
Eine große Schriftstärke korrespondiert dabei mit einem relativ breiten Strich, die Schrift wird fett genannt.
Eine kleine Schriftstärke korrespondiert dabei mit einem relativ schmalen Strich, die Schrift wird mager genannt.
Wären die Repräsentationen der Glyphen wirklich als Striche konstanter Breite realisiert, könnte man die Schriftstärke bei
Schriftarten, die mit Vektorgraphik realsiert sind, leicht stufenlos ändern.
Weil solche Änderungen aber Einfluß auf die Lesbarkeit hätten, ebenso wie eine exakt immer gleiche Breite des Striches,
sind in der Praxis für viele Schriftarten explizit einige Repräsentationen mit verschiedenen Strichstärken verfügbar, die
Auswahl ist diskret.
Während CSS davon ausgeht, dass die relevanten Stärken mit neun Werten repräsentiert werden können, haben viele Schriftarten
ein anderes System, meist mit weniger Werten, was in CSS durch eine Zuordnungsvorschrift gelöst wird.
Es ist also oft damit zu rechnen, dass verschiedene Angaben in CSS zur Schriftstärke trotzdem zu Darstellungen mit derselben Schriftstärke führen können.
Es kann zudem auch vorkommen, dass nicht alle verfügbaren Schriftstärken einer Schriftart überhaupt mit CSS auswählbar sind, etwa
weil diese über das System von CSS mit neun Werten hinausgehen und CSS auch keinen Mechanismus anbietet, die Bezeichungen der
jeweiligen Schriftart direkt anzugeben.
Mögliche Angaben sind Schlüsselwörter, zum einen neun Zahlen: 100, 200, 300, 400, 500, 600, 700, 800, 900. Je höher die Nummer desto fetter die Schrift beziehungsweise größer die Schriftstärke. Zum anderen können auch folgende Schlüsselwörter verwendet werden:
- 'inherit' - geerbt
- 'normal' - ist ein Synonym für 400, für normale Schriftstärke, der Initialwert
- 'bold' - ist ein Synonym für 700, für fette Schrift
- 'bolder' wählt eine Schriftstärke aus, die fetter ist als die geerbte Schriftstärke
- 'lighter' wählt eine Schriftstärke aus, die magerer oder dünner ist als die geerbte Schriftstärke
font-weight ist anwendbar auf visuelle Medien und alle Elemente und wird vererbt.
Da die meisten Schriftarten eben nicht der Zuordnung zu den neun Stärken folgen, es auch keinen Standard gibt, wie die Stärken einheitlich zu bezeichnen sind und es CSS nicht zuläßt, die Bezeichnungen der verwendeten Schriftart anzugeben, wird folgende heuristische Zuordnung empfohlen: Falls neun Stärken vorliegen, wird diese Zuordnung verwendet. Sonst: Eine normale, mittlere Stärke entspricht dem Wert '500'. Gibt es einen Stärke 'bold' oder 'Bold', wird diese '700' zugeordnet. Sind dann noch weitere Stärken vorhanden, werden die sinngemäß zugeordnet, also fetter als 'bold' mit größeren Werten, magerer als 'normal' dann kleiner als '500'.
Wenn dann zu einem CSS-Wert eine Zuordnung fehlt, wird bei Werten kleiner als 400 der nächstgelegene verfügbare kleinere Wert verwendet, gibt es diesen nicht, wird der nächstgelegene verfügbare größere Wert verwendet. Bei Werten größer als 500 wird entsprechend der nächstgelegene verfügbare größere Wert verwendet, gibt es diesen nicht, wird der nächstgelegene kleinere Wert verwendet. Bei 400 wird sofern verfügbar 500 gewählt, sonst die nächstgelegene kleinere Stärke als 400. Bei 500 wird sofern verfügbar 400 gewählt, sonst die nächstgelegene kleinere Stärke als 400.
Beispiel:
p {
font-weight: bolder;
}
Normaler Text, magerer Text und fetter Text.
Anmerkung: Im Vektorformat SVG werden Glyphen von Schriftarten als normale Flächen realisiert, die also auch einen Strich haben können (Eigenschaften und Präsentationsattribute vom Typ stroke*), folglich kann man dort auf Kosten der optimalen Lesbarkeit auch die Strichstärke stroke-width auf einen größeren Wert setzen und stroke auf die gleiche Farbe wie fill, um eine größere Schriftstärke zu erreichen, ohne auf eine Auswahl aus den eingeschränkten Möglichkeiten von font-weight zurückgreifen zu müssen. Mit dem Trick läßt sich dann zumindest in dem Zusammenhang teilweise das Problem umgehen, dass bei einer Schriftart nicht alle Strichstärken verfügbar sein mögen.