@font-face

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.woff") format("woff");
}

Deskriptoren

ascent-override

Definiert die Aufstiegsmetrik für die Schriftart.

descent-override

Definiert die Abstiegsmetrik für die Schriftart.

font-display

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

font-family

Spezifiziert einen Namen, der als Schriftartwert für Schriftarteigenschaften verwendet wird. Ein font-family-Name ist erforderlich, damit die @font-face Regel gültig ist.

font-stretch

Ein font-stretch-Wert. Akzeptiert zwei Werte, um einen Bereich anzugeben, der von einer Schriftart unterstützt wird, z. B. font-stretch: 50% 200%;

font-style

Ein font-style-Wert. Akzeptiert zwei Werte, um einen Bereich anzugeben, der von einer Schriftart unterstützt wird, z. B. font-style: oblique 20deg 50deg;

font-weight

Ein font-weight-Wert. Akzeptiert zwei Werte, um einen Bereich anzugeben, 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-Schriften.

font-variation-settings

Ermöglicht die Low-Level-Kontrolle über OpenType- oder TrueType-Schriftvariationen, indem die vierstelligen Achsennamen der zu variierenden Funktionen zusammen mit ihren Variationswerten angegeben werden.

line-gap-override

Definiert die Zeilenabstandsmetrik für die Schriftart.

size-adjust

Definiert einen Multiplikator für Glyphenumrisse und Metriken, die mit dieser Schriftart verbunden sind. Dies erleichtert die Harmonisierung der Designs verschiedener Schriften, wenn sie in derselben Schriftgröße gerendert werden.

src

Gibt Referenzen zu Schriftressourcen an, einschließlich Hinweisen zum Schriftformat und zur Technologie. Ein src ist erforderlich, damit die @font-face Regel gültig ist.

unicode-range

Der Bereich der Unicode-Codepunkte, die aus der Schrift verwendet werden sollen.

Beschreibung

Es ist üblich, url() und local() zusammen zu verwenden, sodass die auf dem Gerät des Benutzers installierte Kopie der Schrift verwendet wird, wenn verfügbar, und ansonsten wird eine Kopie der Schrift heruntergeladen, wenn sie auf dem Benutzergerät nicht gefunden wird.

Wenn die local()-Funktion bereitgestellt wird, die einen Schriftartnamen angibt, der auf dem Gerät des Benutzers gesucht werden soll, und wenn der User-Agent eine Übereinstimmung findet, wird diese lokale Schriftart verwendet. Andernfalls wird die Schriftressource, die über die url()-Funktion angegeben ist, heruntergeladen und verwendet.

Browser versuchen, Ressourcen in der Reihenfolge ihrer Listendeklaration zu laden, daher sollte local() normalerweise vor url() geschrieben werden. Beide Funktionen sind optional, sodass ein Regelblock, der nur eine oder mehrere local() ohne url() enthält, möglich ist. Wenn spezifischere Schriften mit format()- oder tech()-Werten gewünscht sind, sollten diese vor Varianten ohne diese Werte aufgelistet werden, da sonst die weniger spezifische Variante zuerst ausprobiert und verwendet wird.

Indem Autoren ihre eigene Schriftarten bereitstellen können, ermöglicht @font-face das Design von Inhalten, ohne auf die sogenannten „web-sicheren“ Schriften (d.h. die Schriften, die so häufig sind, dass sie als allgemein verfügbar angesehen werden) beschränkt zu sein. Die Möglichkeit, den Namen einer lokal installierten Schrift anzugeben, die gesucht und verwendet werden soll, ermöglicht es, die Schrift ü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, sondern auch innerhalb einer beliebigen CSS-Bedingungsgruppen-At-Regel verwendet werden.

Schrift-MIME-Typen

Anmerkungen

• Webfonts unterliegen derselben Domain-Beschränkung (Schriftdateien müssen sich auf derselben Domain befinden wie die Seite, die sie verwendet), 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 wird Folgendes nicht funktionieren:

  css

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

Formale Syntax

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

Beispiele

Eine herunterladbare Schriftart spezifizieren

Dieses Beispiel gibt eine herunterladbare Schriftart an, die verwendet werden soll, und wendet sie auf den gesamten Body 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/VeraSeBd.ttf");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
}

Lokale Schriftalternativen angeben

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Über WOFF
• FontSquirrel @font-face-Generator
• Schöne Schriften mit @font-face
• Font Library