CSS -Webfonts
Die CSS-@font-face-Regel
Webfonts ermöglichen es Webdesignern, Schriftarten zu verwenden, die nicht auf dem Computer des Benutzers installiert sind.
Wenn Sie die Schriftart gefunden/gekauft haben, die Sie verwenden möchten, schließen Sie einfach die Schriftartdatei auf Ihrem Webserver ein, und sie wird bei Bedarf automatisch für den Benutzer heruntergeladen.
Ihre "eigenen" Schriftarten werden innerhalb der CSS- @font-faceRegel definiert.
Verschiedene Schriftformate
TrueType-Schriftarten (TTF)
TrueType ist ein Schriftstandard, der in den späten 1980er Jahren von Apple und Microsoft entwickelt wurde. TrueType ist das gebräuchlichste Schriftformat für die Betriebssysteme Mac OS und Microsoft Windows.
OpenType-Schriftarten (OTF)
OpenType ist ein Format für skalierbare Computerschriften. Es basiert auf TrueType und ist ein eingetragenes Warenzeichen von Microsoft. OpenType-Schriftarten werden heute häufig auf den wichtigsten Computerplattformen verwendet.
Das Web Open Font Format (WOFF)
WOFF ist ein Schriftformat zur Verwendung in Webseiten. Es wurde 2009 entwickelt und ist jetzt eine W3C-Empfehlung. WOFF ist im Wesentlichen OpenType oder TrueType mit Komprimierung und zusätzlichen Metadaten. Das Ziel besteht darin, die Schriftverteilung von einem Server zu einem Client über ein Netzwerk mit Bandbreitenbeschränkungen zu unterstützen.
Das Web Open Font-Format (WOFF 2.0)
TrueType/OpenType-Schriftart, die eine bessere Komprimierung als WOFF 1.0 bietet.
SVG-Schriftarten/-Formen
SVG-Schriftarten ermöglichen die Verwendung von SVG als Glyphen beim Anzeigen von Text. Die SVG 1.1-Spezifikation definiert ein Schriftartmodul, das die Erstellung von Schriftarten innerhalb eines SVG-Dokuments ermöglicht. Sie können CSS auch auf SVG-Dokumente anwenden, und die @font-face-Regel kann auf Text in SVG-Dokumenten angewendet werden.
Eingebettete OpenType-Schriftarten (EOT)
EOT-Schriftarten sind eine kompakte Form von OpenType-Schriftarten, die von Microsoft für die Verwendung als eingebettete Schriftarten auf Webseiten entwickelt wurden.
Browserunterstützung für Schriftformate
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Schriftformat vollständig unterstützt.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: Das Schriftformat funktioniert nur, wenn es auf "installierbar" gesetzt ist.
Verwendung der gewünschten Schriftart
In der @font-faceRegel; Definieren Sie zunächst einen Namen für die Schriftart (z. B. myFirstFont) und zeigen Sie dann auf die Schriftartdatei.
Tipp: Verwenden Sie für die Schriftart-URL immer Kleinbuchstaben. Großbuchstaben können im IE zu unerwarteten Ergebnissen führen.
Um die Schriftart für ein HTML-Element zu verwenden, beziehen Sie sich über die Eigenschaft auf den Namen der Schriftart (myFirstFont) font-family:
Beispiel
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Verwendung von fettem Text
Sie müssen eine weitere Regel hinzufügen @font-face, die Deskriptoren für fetten Text enthält:
Beispiel
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Die Datei "sansation_bold.woff" ist eine weitere Schriftartdatei, die die fetten Zeichen für die Schriftart Sansation enthält.
Browser verwenden dies immer dann, wenn ein Textstück mit der Schriftfamilie „myFirstFont“ fett dargestellt werden soll.
Auf diese Weise können Sie viele @font-faceRegeln für dieselbe Schriftart haben.
CSS-Schriftdeskriptoren
Die folgende Tabelle listet alle Schriftdeskriptoren auf, die innerhalb der @font-faceRegel definiert werden können:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |