@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.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. Ein font-family-Name ist erforderlich, damit die @font-face-Regel gültig ist.

font-stretch

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

font-style

Ein font-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

Ein font-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. Ein src 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, sowohl url() als auch local() 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 die local()-Funktion bereitgestellt wird, um einen Schriftartnamen auf dem Gerät des Benutzers zu suchen, und der Benutzer-Agent einen Treffer findet, wird diese lokale Schriftart verwendet. Andernfalls wird die über die url()-Funktion angegebene Schriftressource 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 ein oder mehrere local() ohne url() enthält, möglich ist. Wenn spezifischere Schriftarten mit format() oder tech()-Werten gewünscht werden, sollten diese vor 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 jeder CSS-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