CSS Web-Schriften
- Vorherige Seite CSS-Texteffekte
- Nächste Seite CSS 2D-Transformationen
CSS @font-face-Regel
Web-Schriften ermöglichen Web-Designern, Schriften zu verwenden, die auf dem Computer des Benutzers nicht installiert sind.
Wenn Sie die Schriftart finden/kaufen, die Sie verwenden möchten, müssen Sie nur die Schriftdatei auf Ihrem Webserver enthalten. Sie wird automatisch heruntergeladen, wenn sie benötigt wird.
Ihre "eigenen" Schriften in CSS @font-face werden in den Regeln definiert.
verschiedene Schriftformate
TrueType-Schrift (TTF)
TrueType ist ein Schriftstandard, der in den späten 1980er Jahren von Apple und Microsoft entwickelt wurde. TrueType ist das am häufigsten verwendete Schriftformat in den Betriebssystemen Mac OS und Microsoft Windows.
OpenType-Schrift (OTF)
OpenType ist ein skalierbares Computerfont-Format. Es basiert auf TrueType und ist ein eingetragenes Warenzeichen von Microsoft. Heute werden OpenType-Schriften auf den wichtigsten Computerplattformen weit verbreitet verwendet.
Web Open Font Format (WOFF)
WOFF ist ein Schriftformat für Webseiten. Es wurde 2009 entwickelt und ist inzwischen ein empfohlenes Standard der W3C. WOFF ist im Wesentlichen ein komprimiertes OpenType oder TrueType mit zusätzlichen Metadaten. Ziel ist es, Schriftarten in Netzwerken mit begrenzter Bandbreite von Servern zu Clients zu verteilen.
Web Open Font Format (WOFF 2.0)
TrueType/OpenType-Schriften bieten eine bessere Komprimierung als WOFF 1.0.
SVG-Schrift/Shape
SVG-Schriften erlauben es, SVG als Zeichensatz zu verwenden, wenn Text angezeigt wird. Die SVG 1.1-Spezifikation definiert einen Font-Modul, das es ermöglicht, Schriften in SVG-Dokumenten zu erstellen. Sie können auch CSS 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 komprimierte Form der OpenType-Schriftarten, die von Microsoft entwickelt wurden und als eingebettete Schriftarten auf Webseiten verwendet werden.
Browserunterstützung für Schriftartformate
Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die das Schriftartformat vollständig unterstützt.
| Schriftartformate | |||||
| 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 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | 3.2 | Nicht unterstützt |
| EOT | 6.0 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
*IE:Das Schriftartformat ist nur gültig, wenn auf "installable" gesetzt ist.
*Firefox:Standardmäßig nicht unterstützt, aber aktivierbar (der Schalter muss auf "true" gesetzt werden, um WOFF2 zu verwenden).
Verwenden Sie die gewünschte Schriftart
In der @font-face Regel: Definieren Sie zunächst den Namen der Schriftart (z.B. myFirstFont) und zeigen Sie dann auf die Schriftartendatei.
Tipp:Die Schriftart-URL muss in Kleinbuchstaben sein. Großbuchstaben können unerwartete Ergebnisse in IE verursachen.
Um die Schriftart für HTML-Elemente zu verwenden, beziehen Sie sich auf den Schriftartnamen (myFirstFont) über das Attribut font-family:
Beispiel
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Verwenden Sie fette Texte
Sie müssen eine weitere @font-face Regel hinzufügen, die die Beschreibungssymbole für fette Texte enthält:
Beispiel
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Die Datei "sansation_bold.woff" ist eine weitere Schriftartendatei, die die fett geschriebenen Zeichen der Schriftart Sansation enthält.
Wenn ein Absatz mit der Schriftartfamilie "myFirstFont" fett dargestellt werden soll, verwendet der Browser ihn.
So können Sie viele Einstellungen für denselben Schrifttyp vornehmen. @font-face Regeln.
CSS Schriftartbeschreibungen
Die nachstehende Tabelle zeigt, welche @font-face Alle in der Regel definierten Schriftartbeschreibungssymbole (font descriptor):
| Beschreibungssymbol | Wert | Beschreibung |
|---|---|---|
| font-family | name | notwendig. Definiert den Namen der Schriftart. |
| src | URL | notwendig. Definiert die URL der Schriftartendatei. |
| font-stretch |
|
Optional. Definiert, wie die Schriftart gestreckt werden soll. Der Standardwert ist "normal". |
| font-style |
|
Optional. Definiert den Stil der Schriftart. Der Standardwert ist "normal". |
| font-weight |
|
Optional. Definiert die Dicke der Schriftart. Der Standardwert ist "normal". |
| unicode-range | unicode-range | Optional. Definiert den Bereich der unterstützten UNICODE-Zeichen. Der Standardwert ist "U+0-10FFFF". |
- Vorherige Seite CSS-Texteffekte
- Nächste Seite CSS 2D-Transformationen
