CSS @font-face-Regel
Definition und Verwendung
Durch die Verwendung der @font-face-Regel müssen Web-Designer nicht mehr auf eine "sichere" Schriftart zurückgreifen.
In der @font-face-Regel müssen Sie zunächst den Namen der Schriftart (z.B. myFirstFont) definieren und dann auf die Schriftartdatei verweisen.
Tipp:Die URL der Schriftart muss in Kleinbuchstaben angegeben werden. Großbuchstaben können unerwartete Ergebnisse in IE verursachen!
Um die Schriftart für HTML-Elemente zu verwenden, beziehen Sie sich auf den Namen der Schriftart über das Attribut font-family (myFirstFont):
div {
font-family: myFirstFont;
}
Weitere Informationen finden Sie unter:
CSS-Tutorial:CSS Web Schriftart
Beispiel
Definieren Sie eine Schriftart mit dem Namen "myFirstFont" und geben Sie die URL an, unter der sie gefunden werden kann:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Mehr TIY-Beispiele finden Sie unten auf der Seite.
CSS-Syntax
@font-face {
font-properties
}
| Schriftartendefinitor | Wert | Beschreibung |
|---|---|---|
| font-family | name | notwendig. Definiert den Namen der Schriftart. |
| src | URL | notwendig. Definiert die URL für das Herunterladen der Schriftart. |
| font-stretch |
|
Optional. Definiert, wie die Schrift gestreckt werden soll. Standardwert ist "normal". |
| font-style |
|
Optional. Definiert den Stil der Schrift. Standardwert ist "normal". |
| font-weight |
|
Optional. Definiert die Dicke der Schrift. Standardwert ist "normal". |
| unicode-range | unicode-range | Optional. Definiert den Unicode-Zeichenbereich, den die Schrift unterstützt. Standardwert ist "U+0-10FFFF". |
Mehr Beispiele
Beispiel
Sie müssen eine weitere @font-face-Regel hinzufügen, die den Beschreibner für fette Texte enthält:
@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 Abschnitt eines Textes, der die Schriftart "myFirstFont" verwendet, fett dargestellt werden soll, verwendet der Browser sie.
Dadurch können mehrere @font-face-Regeln für das gleiche Schriftart festgelegt werden.
Browserunterstützung
Internet Explorer, Firefox, Opera, Chrome und Safari unterstützen die @font-face-Regel.
Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die das vollständige Schriftformat unterstützt.
| Schriftformate | |||||
|---|---|---|---|---|---|
| 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 |
* Edge und IE: Schriftformate sind nur gültig, wenn auf "installable" gesetzt.
* Firefox: Standardmäßig deaktiviert, kann jedoch aktiviert werden (Flag muss auf "true" gesetzt werden, um WOFF2 zu verwenden).
