Die font-weightEigenschaft legt die Gewichtung oder Dicke einer Schriftart fest und hängt entweder von den verfügbaren Schriftarten innerhalb einer Schriftfamilie oder von den vom Browser definierten Gewichten ab.
span ( font-weight: bold; )Die font-weightEigenschaft akzeptiert entweder einen Schlüsselwortwert oder einen vordefinierten numerischen Wert. Die verfügbaren Schlüsselwörter sind:
normalboldbolderlighter
Die verfügbaren numerischen Werte sind:
100200300400500600700800900
Der Schlüsselwortwert wird normaldem numerischen Wert 400und der Wert bolddem zugeordnet 700.
Um einen Effekt mit anderen Werten als 400oder zu sehen 700, muss die verwendete Schriftart integrierte Flächen haben, die den angegebenen Gewichten entsprechen.
Wenn eine Schriftart eine fette („700“) oder normale („400“) Version als Teil der Schriftfamilie hat, verwendet der Browser diese. Wenn diese nicht verfügbar sind, ahmt der Browser seine eigene fette oder normale Version der Schriftart nach. Die anderen nicht verfügbaren Gewichte werden nicht nachgeahmt. Schriftarten verwenden häufig Namen wie "Normal" und "Hell", um alternative Schriftstärken zu identifizieren.
Die folgende Demo zeigt die Verwendung der alternativen Gewichtswerte:
In der obigen Demo wird die kostenlose Schriftart Open Sans verwendet, die über die Google Web Fonts-API eingebettet ist. Die Schriftart wird mit allen verfügbaren Schriftstärken geladen, sodass mithilfe der font-weightEigenschaft die verschiedenen verfügbaren Schriftstärken angezeigt werden, wie im Text jedes Absatzes beschrieben. Die nicht verfügbaren Gewichte zeigen einfach das logisch nächstgelegene Gewicht an.
Gängige Schriftarten wie Arial, Helvetica, Georgia usw. haben keine anderen Gewichte als 400und 700. Dieselbe Demo, die mit einer dieser Schriftarten angezeigt wird, zeigt in den neun Absätzen nur zwei Gewichte an.
Verwenden von "mutigeren" und "leichteren" Schlüsselwörtern
Die Schlüsselwortwerte bolderund lighterbeziehen sich auf die berechnete Schriftgröße des übergeordneten Elements. Der Browser sucht nach dem nächstgelegenen "kühneren" oder "leichteren" Gewicht, je nachdem, was in der Schriftfamilie verfügbar ist. Andernfalls wählt er einfach "400" oder "700", je nachdem, was am sinnvollsten ist.
Untergeordnete Elemente erben nicht die Schlüsselwortwerte "kühner" und "leichter", sondern das berechnete Gewicht.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert |