CSS- @font-face- Regel
Beispiel
Geben Sie eine Schriftart mit dem Namen "myFirstFont" und die URL an, unter der sie gefunden werden kann:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Mit der @font-faceRegel müssen Webdesigner keine der „websicheren“ Schriftarten mehr verwenden.
In der @font-faceRegel müssen Sie zunächst einen Namen für die Schriftart definieren (z. B. myFirstFont) und dann auf die Schriftartdatei zeigen.
Um die Schriftart für ein HTML-Element zu verwenden, verweisen Sie auf den Namen der Schriftart (myFirstFont) über die Eigenschaft font-family:
div
{
font-family: myFirstFont;
}
Browser-Unterstützung
Die @font-faceRegel wird in Edge, Chrome, Firefox, Safari und Opera unterstützt.
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 |
*Das Schriftformat funktioniert nur, wenn es auf "installierbar" eingestellt ist.
Syntax
@font-face
{
font-properties
}
| Font descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines the name of the font. |
| src | URL | Required. Defines the URL(s) where the font should be downloaded from |
| 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 value is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Mehr Beispiele
Beispiel
Sie müssen eine weitere @font-face-Regel hinzufügen, die Deskriptoren für fetten Text enthält:
@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-face-Regeln für dieselbe Schriftart haben.
Verwandte Seiten
CSS-Tutorial: CSS-Webfonts