Mit Web-Schriftarten können Webdesigner Schriftarten verwenden, die nicht auf dem Computer des Benutzers installiert sind.
Wenn Sie die Schriftart gefunden/gekauft haben, die Sie verwenden möchten, fügen Sie einfach die Schriftart hinzu Datei auf Ihrem Webserver und wird bei Bedarf automatisch an den Benutzer heruntergeladen.
Ihre „eigenen“ Schriftarten werden innerhalb der CSS-Regel @font-face
definiert.
TrueType-Schriftarten (TTF)
TrueType ist ein Schriftartenstandard, der Ende der 1980er Jahre von Apple und Microsoft entwickelt wurde. TrueType ist das gebräuchlichste Schriftformat sowohl für Mac OS als auch für Microsoft Windows-Betriebssysteme.
OpenType-Schriftarten (OTF)
OpenType ist ein Format für skalierbare Computerschriftarten. Es wurde auf TrueType erstellt, und ist eine eingetragene Marke von Microsoft. OpenType-Schriftarten werden heute überwiegend verwendet Computerplattformen.
Das Web Open Font Format (WOFF)
WOFF ist ein Schriftformat zur Verwendung in Webseiten. Es wurde 2009 entwickelt und ist jetzt eine W3C-Empfehlung. WOFF ist im Wesentlichen OpenType oder TrueType mit Komprimierung und zusätzliche Metadaten. Ziel ist es, die Verbreitung von Schriftarten zu unterstützen von einem Server zu einem Client über ein Netzwerk mit Bandbreitenbeschränkungen.
Das Web Open Font Format (WOFF 2.0)
TrueType/OpenType-Schriftart, die eine bessere Komprimierung als WOFF 1.0 bietet.
SVG-Schriftarten/-Formen
SVG-Schriftarten ermöglichen die Verwendung von SVG als Glyphen bei der Textanzeige. Das SVG 1.1 Die Spezifikation definiert ein Schriftartenmodul, das die Erstellung von Schriftarten innerhalb einer ermöglicht SVG-Dokument. Sie können CSS und die @font-face-Regel auch auf SVG-Dokumente anwenden kann auf Text in SVG-Dokumenten angewendet werden.
Eingebettete OpenType-Schriftarten (EOT)
EOT-Schriftarten sind eine kompakte Form von OpenType-Schriftarten, die von Microsoft für die Verwendung entwickelt wurden als eingebettete Schriftarten auf Webseiten.
Die Zahlen in der Tabelle geben die erste Browserversion an, die vollständig unterstützt Schriftformat.
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 |
*IE: Das Schriftartformat funktioniert nur, wenn es auf „installierbar“ eingestellt ist.
In der @font-face
-Regel; Definieren Sie zunächst einen Namen für die Schriftart (z. B. myFirstFont) und verweisen Sie dann auf die Schriftartdatei.
Tipp: Verwenden Sie für die Schriftart-URL immer Kleinbuchstaben. Großbuchstaben können im IE zu unerwarteten Ergebnissen führen.
Um die Schriftart für ein HTML-Element zu verwenden, verweisen Sie über die Eigenschaft font-family
auf den Namen der Schriftart (myFirstFont):
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>
</body>
</html>
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;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
</body>
</html>
Die Datei „sansation_bold.woff“ ist eine weitere Schriftartendatei, die die fetten Zeichen für die Schriftart Sansation enthält.
Browser verwenden dies immer dann, wenn ein Text mit der Schriftfamilie „myFirstFont“ fett dargestellt werden soll.
Auf diese Weise können Sie viele @font-face
-Regeln für dieselbe Schriftart haben.
In der folgenden Tabelle sind alle Schriftartdeskriptoren aufgeführt, die innerhalb der Regel @font-face
definiert werden können:
Beschreibung:
font-family
Werte:
name
Beschreibung:
Erforderlich. Definiert einen Namen für die Schriftart
Beschreibung:
src
Werte:
URL
Beschreibung:
Erforderlich. Definiert die URL der Schriftartdatei
Beschreibung:
font-stretch
Werte:
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Beschreibung:
Optional. Definiert, wie die Schriftart gestreckt werden soll. Standard ist „normal“
Beschreibung:
font-style
Werte:
normal
italic
oblique
Beschreibung:
Optional. Definiert, wie die Schriftart gestaltet werden soll. Standard ist „normal“
Beschreibung:
font-weight
Werte:
normal
bold
100
200
300
400
500
600
700
800
900
Beschreibung:
Optional. Definiert die Fettstärke der Schriftart. Standard ist „normal“
Beschreibung:
unicode-range
Werte:
unicode-range
Beschreibung:
Optional. Definiert den Bereich der UNICODE-Zeichen, die die Schriftart unterstützt. Der Standardwert ist „U+0-10FFFF“.