CSS3 Web Fonts - Die @font-face - Regel
Webfonts ermöglichen Web-Designer-Schriften zu verwenden, die auf dem Computer des Benutzers nicht installiert sind.
Wenn Sie gefunden haben / kaufte die Schriftart, die Sie verwenden möchten, nur die Font-Datei auf Ihrem Webserver enthalten, und es wird automatisch für den Benutzer heruntergeladen werden, wenn nötig.
Ihre "eigene" Schriftarten sind in der CSS3 definiert @font-face - Regel.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Verschiedene Zeichenformate
TrueType - Fonts (TTF)
TrueType ist eine Schriftart Standard in den späten 1980er Jahren entwickelt, von Apple und Microsoft. TrueType ist die häufigste Schriftformat sowohl für die Mac OS und Microsoft Windows - Betriebssysteme.
OpenType - Fonts (OTF)
OpenType ist ein Format für skalierbare Computer - Schriftarten. Es wurde auf gebaut TrueType , und ist ein eingetragenes Warenzeichen von Microsoft. OpenType - Schriftarten auf den wichtigsten Computer - Plattformen heute üblicherweise verwendet werden.
Das Web Open Font Format (WOFF)
WOFF ist ein Schriftformat für die Verwendung in Web - Seiten. Es wurde 2009 entwickelt und ist heute eine W3C-Empfehlung. WOFF ist im Wesentlichen OpenType oder TrueType mit Kompression und zusätzliche Metadaten. Das Ziel ist es 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 Kompression als bietet WOFF 1,0.
SVG Fonts / Shapes
SVG-Fonts erlauben SVG als Glyphen verwendet werden, wenn die Anzeige von Text. Die SVG 1.1 Spezifikation eine Schrift Modul definieren, das die Erstellung von Schriftarten innerhalb eines SVG-Dokument erlaubt. Sie können auch CSS SVG - Dokumenten, und die Anwendung @font-face - Regel angewendet werden kann in SVG - Dokumenten in Text um .
Embedded OpenType - Fonts (EOT)
EOT - Fonts sind eine kompakte Form von OpenType - Schriften entworfen von Microsoft für die Verwendung als eingebettete Schriften auf Webseiten.
Browser-Unterstützung für Schriftformate
Die Zahlen in der Tabelle gibt die erste Browser-Version, 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 | Nicht unterstützt | 36.0 | 35,0 * | Nicht unterstützt | 26.0 |
| SVG | Nicht unterstützt | 4.0 | Nicht unterstützt | 3.2 | 9.0 |
| EOT | 6.0 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
* IE: Das Font-Format funktioniert nur, wenn gesetzt "installierbare" zu sein.
* Firefox: standardmäßig nicht unterstützt, kann aber (müssen ein Flag auf "true" zu verwenden WOFF2) aktiviert werden.
Verwenden Sie die gewünschte Schrift
In der CSS3 @font-face - Regel müssen Sie zunächst einen Namen für die Schrift (zB definieren myFirstFont ) und dann auf die Font - Datei verweisen.
 | Tipp: Verwenden Sie immer 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 font-family - Eigenschaft:
Beispiel
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Versuch es selber " Mit Bold Text
Sie müssen einen anderen hinzufügen @font-face - Regel enthält Deskriptoren für fettgedruckten Text:
Beispiel
@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 viele haben @font-face für die gleiche Schriftart Regeln.
Testen Sie sich mit Übungen!
CSS3 Schriftdeskriptoren
Die folgende Tabelle listet alle Schriftdeskriptoren , die innerhalb der definiert werden kann @font-face - Regel:
| Descriptor | Werte | Beschreibung |
|---|---|---|
| font-family | name | Erforderlich. Definiert einen Namen für die Schriftart |
| src | URL | Erforderlich. Definiert die URL der Schriftdatei |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optional. Legt fest, wie die Schrift sollte gestreckt werden. Der Standardwert ist "normal" |
| font-style | normal italic oblique | Optional. Legt fest, wie die Schrift gestaltet werden sollte. Der Standardwert ist "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. Definiert die Kühnheit der Schriftart. Der Standardwert ist "normal" |
| unicode-range | unicode-range | Optional. Definiert den Bereich von Unicode-Zeichen der Schriftart unterstützt. Die Standardeinstellung ist "U + 0-10FFFF" |