CSS-Webfonts

Inhaltsverzeichnis

Die CSS @font-face-Regel

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.

Verschiedene Schriftformate

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.

Browserunterstützung für Schriftformate

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.

Verwenden Sie die gewünschte Schriftart

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):

Beispiel

@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>

Verwenden von fettem Text

Sie müssen eine weitere @font-face-Regel hinzufügen, die Deskriptoren für fetten Text enthält:

Beispiel

@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.

CSS-Schriftartdeskriptoren

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“.