Beispiel
Geben Sie eine Schriftart mit dem Namen "myFirstFont" , und die URL angeben , wo es zu finden ist:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Mit der @ font-face - Regel, Web - Designer haben nicht mehr eine der zu verwenden "web-safe" Schriftarten.
In der neuen @ font-face - Regel müssen Sie zunächst einen Namen für die Schriftart definieren (eg myFirstFont) , und dann auf die Font - Datei verweisen.
Tipp: Verwenden Sie Kleinbuchstaben für die Schriftart URL. Großbuchstaben kann zu unerwarteten Ergebnissen in IE geben!
Um die Schrift für ein HTML - Element verwenden, beziehen sich auf den Namen der Schriftart (myFirstFont) durch die Eigenschaft font-family:
div
{
font-family: myFirstFont;
}Browser-Unterstützung
Die @ font-face-Regel wird in Internet Explorer, Firefox, Opera, Chrome und Safari unterstützt.
Die Zahlen in der Tabelle gibt die erste Browser-Version, die das Schriftformat vollständig unterstützt.
| Font-Format | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9.0 * | 3.5 | 3.1 | 10.0 |
| WOFF | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36.0 | Nicht unterstützt | 35,0 * | Nicht unterstützt | 26.0 |
| SVG | 4.0 | Nicht unterstützt | Nicht unterstützt | 3.2 | 9.0 |
| EOT | Nicht unterstützt | 6.0 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
* Kanten und IE: Das Font - Format funktioniert nur , wenn sein gesetzt "installable" .
* Firefox: standardmäßig deaktiviert ist , kann aber (müssen ein Flag aktiviert sein "true" zu verwenden WOFF2).
Syntax
@font-face
{
font-properties
}| Font Descriptor | Werte | Beschreibung |
|---|---|---|
| Schriftfamilie | name | Erforderlich. Definiert den Namen der Schriftart. |
| src | URL | Erforderlich. Definiert die URL(s) , wo die Schriftart heruntergeladen werden soll aus |
| font-stretch | normal kondensiert Ultra kondensiert extra kondensiert semi-kondensierte ergänzt semi-expandierte extra erweitert Ultra erweitert | Optional. Legt fest, wie die Schrift sollte gestreckt werden. Der Standardwert ist "normal" |
| Schriftstil | normal kursiv schräg | Optional. Legt fest, wie die Schrift gestaltet werden sollte. Der Standardwert ist "normal" |
| font-weight | normal Fett gedruckt 100 200 300 400 500 600 700 800 900 | Optional. Definiert die Kühnheit der Schriftart. Der Standardwert ist "normal" |
| Unicode-Bereich | unicode-range | Optional. Definiert den Bereich von Unicode-Zeichen der Schriftart unterstützt. Der Standardwert ist "U+0-10FFFF" |
Probieren Sie es selbst - Beispiele
Beispiel
Sie müssen eine andere @ font-face-Regel enthält Deskriptoren für fettgedruckten Text hinzufügen:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Versuch es selber " Die Datei "sansation_bold.woff" ist eine andere Schriftart - Datei, die die fetten Buchstaben für die Sansation Font.
Browser wird dies verwenden , wenn ein Text mit der font-family "myFirstFont" sollte so fett machen.
Auf diese Weise können Sie für die gleiche Schriftart viele @ font-face-Regeln haben.
Verwandte Seiten
CSS3 Tutorial: CSS3 Fonts