CSS @font-face-Regel

Definition und Verwendung

Durch die Verwendung der @font-face-Regel müssen Web-Designer nicht mehr auf eine "sichere" Schriftart zurückgreifen.

In der @font-face-Regel müssen Sie zunächst den Namen der Schriftart (z.B. myFirstFont) definieren und dann auf die Schriftartendatei verweisen.

Tipp:Die URL der Schriftart wird in Kleinbuchstaben verwendet. Großbuchstaben können unerwartete Ergebnisse in IE verursachen!

Um die Schriftart für HTML-Elemente zu verwenden, beziehen Sie sich auf den Namen der Schriftart durch das Attribut font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

Siehe auch:

CSS-Tutorial:CSS Web Schriftart

Beispiel

Definieren Sie eine Schriftart namens "myFirstFont" und geben Sie die URL an, unter der sie gefunden werden kann:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Probieren Sie es selbst aus

Mehr TIY-Beispiele finden Sie unten auf der Seite.

CSS-Syntax

@font-face {
  font-properties
}
Schriftartendefinitor Wert Beschreibung
font-family name notwendig. Definiert den Namen der Schriftart.
src URL notwendig. Definiert die URL zum Herunterladen der Schriftart.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Optional. Definiert, wie die Schriftart gestreckt werden soll. Standardwert ist "normal".
font-style
  • normal
  • italic
  • oblique
 Optional. Definiert den Stil der Schriftart. Standardwert ist "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Optional. Definiert die Dicke der Schriftart. Standardwert ist "normal".
unicode-range unicode-range Optional. Definiert den Unicode-Bereich, den die Schriftart unterstützt. Standardwert ist "U+0-10FFFF".

Mehr Beispiele

Beispiel

Sie müssen eine weitere @font-face-Regel hinzufügen, die den Beschreibungsparameter für fette Texte enthält:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Probieren Sie es selbst aus

Die Datei "sansation_bold.woff" ist eine weitere Schriftartendatei, die die fett gedruckten Zeichen der Schriftart Sansation enthält.

Wenn ein Abschnitt eines Textes, der das Schriftartenfamilie "myFirstFont" zugewiesen hat, fett dargestellt werden soll, verwendet der Browser es.

Auf diese Weise können Sie mehrere @font-face-Regeln für dasselbe Schriftart festlegen.

Browser-Unterstützung

Internet Explorer, Firefox, Opera, Chrome und Safari unterstützen die @font-face-Regel.

Die Zahlen in der Tabelle geben die erste Browser-Version an, die das vollständige Schriftart-Format unterstützt.

Schriftart-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 Nicht unterstützt Nicht unterstützt Nicht unterstützt 3.2 Nicht unterstützt
EOT 6.0 Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt

* Edge und IE: Der Schriftart-Format ist nur gültig, wenn er auf "installable" eingestellt ist

* Firefox: De Standard ist deaktiviert, kann jedoch aktiviert werden (um WOFF2 zu verwenden, muss der Flagge "true" zugewiesen werden).