Die@font-faceCSSat-rule definiert eine benutzerdefinierte Schriftart zur Anzeige von Text; die Schriftart kann entweder von einem entfernten Server oder von einer lokal auf dem Computer des Benutzers installierten Schriftart geladen werden.

Syntax

@font-face {  font-family: "Trickster";  src:    local("Trickster"),    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),    url("trickster-outline.otf") format("opentype"),    url("trickster-outline.woff2") format("woff2");}

Deskriptoren

ascent-override

Definiert die Aufwärtsmetrik für die Schriftart.

descent-override

Definiert die Abwärtsmetrik für die Schriftart.

font-display

Bestimmt, wie eine Schriftart basierend darauf angezeigt wird, ob und wann sie heruntergeladen und einsatzbereit ist.

font-family

Gibt einen Namen an, der als Schriftart-Wert für Schriftart-Eigenschaften verwendet wird. Einfont-family-Name ist erforderlich, damit die@font-face-Regel gültig ist.

font-stretch

Einfont-stretch-Wert. Akzeptiert zwei Werte zur Angabe eines Bereichs, der von einer Schriftart unterstützt wird, z.B.font-stretch: 50% 200%;

font-style

Einfont-style-Wert. Akzeptiert zwei Werte zur Angabe eines Bereichs, der von einer Schriftart unterstützt wird, z.B.font-style: oblique 20deg 50deg;

font-weight

Einfont-weight-Wert. Akzeptiert zwei Werte zur Angabe eines Bereichs, der von einer Schriftart unterstützt wird, z.B.font-weight: 100 400;

font-feature-settings

Ermöglicht die Kontrolle über erweiterte typografische Funktionen in OpenType-Schriftarten.

font-variation-settings

Ermöglicht eine niedrige Kontrolle über OpenType- oder TrueType-Schriftvariationen, indem die vier Buchstaben umfassenden Achsennamen der zu variierenden Funktionen zusammen mit ihren Variationswerten angegeben werden.

line-gap-override

Definiert die Zeilenlückenmetrik für die Schriftart.

size-adjust

Definiert einen Multiplikator für Glyphen-Umrisse und Metriken, die mit dieser Schriftart verknüpft sind. Dies erleichtert die Harmonisierung der Designs verschiedener Schriftarten, wenn sie in derselben Schriftgröße gerendert werden.

src

Gibt Verweise auf Schriftressourcen einschließlich Hinweise zum Schriftformat und zur Technologie an. Einsrc ist erforderlich, damit die@font-face-Regel gültig ist.

unicode-range

Der Bereich der Unicode-Zeichen, die aus der Schriftart verwendet werden sollen.

Beschreibung

Es ist gängig, sowohlurl() als auchlocal() zusammen zu verwenden, sodass die installierte Kopie der Schriftart des Benutzers verwendet wird, falls verfügbar, andernfalls wird eine Kopie der Schriftart heruntergeladen, wenn sie auf dem Gerät des Benutzers nicht gefunden wird.

Wenn dielocal()-Funktion bereitgestellt wird, um einen Schriftartnamen auf dem Gerät des Benutzers zu suchen, und derBenutzer-Agent einen Treffer findet, wird diese lokale Schriftart verwendet. Andernfalls wird die über dieurl()-Funktion angegebene Schriftressource heruntergeladen und verwendet.

Browser versuchen, Ressourcen in der Reihenfolge ihrer Listendeklaration zu laden, daher solltelocal() normalerweise vorurl() geschrieben werden. Beide Funktionen sind optional, sodass ein Regelblock, der nur ein oder mehrerelocal() ohneurl() enthält, möglich ist.Wenn spezifischere Schriftarten mitformat() odertech()-Werten gewünscht werden, sollten diesevor Versionen aufgelistet werden, die diese Werte nicht haben, da sonst die weniger spezifische Variante zuerst ausprobiert und verwendet würde.

Für die Web-Bereitstellung ist es im Allgemeinen am besten, Schriftarten im WOFF2-Format zu dienen, da es Schriftarten effizienter komprimiert als ältere Formate wie WOFF oder OpenType und die Dateigröße reduziert und die Ladezeiten verbessert. WOFF2 wird auch gut in modernen Browsern unterstützt und ist für die meisten Websites eine sichere Standardwahl.

Indem Autoren ihre eigenen Schriftarten bereitstellen dürfen, ermöglicht@font-face das Designen von Inhalten, ohne auf die sogenannten "web-sicheren" Schriftarten (also solche, die so verbreitet sind, dass sie als auf universeller Ebene verfügbar gelten) beschränkt zu sein. Die Möglichkeit, den Namen einer lokal installierten Schriftart anzugeben und zu verwenden, ermöglicht es, die Schriftart über die Grundlagen hinaus anzupassen, ohne auf eine Internetverbindung angewiesen zu sein.

Die@font-face-At-Regel kann nicht nur auf oberster Ebene eines CSS verwendet werden, sondern auch innerhalb jederCSS-Konditional-Gruppenregel.

MIME-Typen für Schriftarten

Hinweise

• Web-Schriftarten unterliegen denselben Domain-Einschränkungen (Schriftdateien müssen auf derselben Domain wie die Seite, die sie verwendet, sein), es sei denn,HTTP-Zugriffskontrollen werden verwendet, um diese Einschränkung zu lockern.

• @font-face kann nicht innerhalb eines CSS-Selectors deklariert werden. Zum Beispiel funktioniert das folgende nicht:

  css

  .className {  @font-face {    font-family: "MyHelvetica";    src:      local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),      url("MgOpenModernaBold.woff2");    font-weight: bold;  }}

Formale Syntax

@font-face =
  @font-face {<declaration-list> }

Beispiele

Spezifizieren einer herunterladbaren Schriftart

Dieses Beispiel spezifiziert eine herunterladbare Schriftart zur Verwendung und wendet sie auf den gesamten Textkörper des Dokuments an:

<body>  This is Bitstream Vera Serif Bold.</body>

@font-face {  font-family: "Bitstream Vera Serif Bold";  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");}body {  font-family: "Bitstream Vera Serif Bold", serif;}

Lokale Schriftalternativen spezifizieren

In diesem Beispiel wird die lokale Kopie des Benutzers von "Helvetica Neue Bold" verwendet; falls der Benutzer diese Schriftart nicht installiert hat (sowohl der vollständige Schriftname als auch der Postscript-Name werden versucht), wird stattdessen die herunterladbare Schriftart mit dem Namen "MgOpenModernaBold.woff2" verwendet:

@font-face {  font-family: "MyHelvetica";  src:    local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),    url("MgOpenModernaBold.woff2");  font-weight: bold;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Über WOFF
• FontSquirrel @font-face generator
• Schöne Schriftarten mit @font-face
• Font Library