@font-face CSS at-rule

Syntax

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

Deskriptoren

ascent-override

Definiert die Aufstiegsmetrik für die Schriftart.

descent-override

Definiert die Abstiegsmetrik für die Schriftart.

font-display

Bestimmt, wie ein Schriftschnitt angezeigt wird, abhängig davon, ob und wann er heruntergeladen und einsatzbereit ist.

font-family

Legt einen Namen fest, der als Wert des Schriftschnitts für Schriftarteigenschaften verwendet wird. Ein font-family-Name ist erforderlich, damit die Regel @font-face gültig ist.

font-stretch

Ein font-stretch-Wert. Akzeptiert zwei Werte, um einen Bereich anzugeben, der von einem Schriftschnitt unterstützt wird, beispielsweise font-stretch: 50% 200%;

font-style

Ein font-style-Wert. Akzeptiert zwei Werte, um einen Bereich anzugeben, der von einem Schriftschnitt unterstützt wird, beispielsweise font-style: oblique 20deg 50deg;

font-weight

Ein font-weight-Wert. Akzeptiert zwei Werte, um einen Bereich anzugeben, der von einem Schriftschnitt unterstützt wird, beispielsweise font-weight: 100 400;

font-feature-settings

Ermöglicht die Steuerung erweiterter typografischer Funktionen in OpenType-Schriftarten.

font-variation-settings

Ermöglicht eine Steuerung auf niedriger Ebene über OpenType- oder TrueType-Schriftvariationen, indem die vierbuchstabigen Achsennamen der zu variierenden Funktionen zusammen mit ihren Variationswerten angegeben werden.

font-width

Ermöglicht Autoren, für die angegebenen Schriftarten einen normalen, schmalen oder breiten Schriftschnitt festzulegen.

line-gap-override

Definiert die Zeilenabstandsmetrik für die Schriftart.

size-adjust

Definiert einen Multiplikator für Glyphenkonturen und Metriken, die dieser Schriftart zugeordnet sind. Dies erleichtert die Harmonisierung der Gestaltung verschiedener Schriftarten, wenn sie mit derselben Schriftgröße gerendert werden.

src

Legt Verweise auf Schriftressourcen fest, einschließlich Hinweisen zum Schriftformat und zur Technologie. Ein src ist erforderlich, damit die Regel @font-face gültig ist.

unicode-range

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

Beschreibung

Es ist üblich, url() und 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 nicht auf dem Gerät des Benutzers gefunden wird.

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

Browser versuchen, Ressourcen in der Reihenfolge ihrer Listendeklaration zu laden. Daher sollte local() üblicherweise vor url() geschrieben werden. Beide Funktionen sind optional, daher ist ein Regelblock möglich, der nur eine oder mehrere Angaben von local() ohne url() enthält. Wenn spezifischere Schriftarten mit format()- oder tech()-Werten gewünscht sind, sollten diese vor Versionen ohne diese Werte aufgeführt werden, da andernfalls zuerst die weniger spezifische Variante versucht und verwendet würde.

Für die Bereitstellung im Web ist es im Allgemeinen am besten, Schriftarten im WOFF2-Format bereitzustellen, da dieses Schriftarten effizienter komprimiert als ältere Formate wie WOFF oder OpenType. Dadurch wird die Dateigröße reduziert und die Ladezeit verbessert. WOFF2 wird zudem von modernen Browsern gut unterstützt, was es für die meisten Websites zu einer sicheren Standardwahl macht.

Indem Autoren eigene Schriftarten bereitstellen können, ermöglicht @font-face die Gestaltung von Inhalten, ohne auf die sogenannten „websicheren“ Schriftarten beschränkt zu sein (also Schriftarten, die so verbreitet sind, dass sie als universell verfügbar gelten). Die Möglichkeit, den Namen einer lokal installierten Schriftart anzugeben, nach der gesucht und die verwendet werden soll, ermöglicht es, die Schriftart über die Grundlagen hinaus anzupassen, ohne auf eine Internetverbindung angewiesen zu sein.

Die At-Regel @font-face kann nicht nur auf der obersten Ebene eines CSS verwendet werden, sondern auch innerhalb jeder bedingten CSS-Gruppen-At-Regel.

Schriftarten-MIME-Typen

Hinweise

• Webschriftarten unterliegen derselben Domainbeschränkung (Schriftartdateien müssen sich auf derselben Domain befinden wie die Seite, die sie verwendet), sofern nicht HTTP-Zugriffssteuerungen verwendet werden, um diese Beschränkung zu lockern.

• @font-face kann nicht innerhalb eines CSS-Selektors deklariert werden. Beispielsweise funktioniert Folgendes 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

Eine herunterladbare Schriftart angeben

Dieses Beispiel gibt eine herunterladbare Schriftart zur Verwendung an 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/FiraSans-Regular.woff2");
}

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

Lokale Schriftartalternativen angeben

In diesem Beispiel wird die lokale Kopie von „Helvetica Neue Bold“ des Benutzers verwendet. Falls der Benutzer diese Schriftart nicht installiert hat (es werden sowohl der vollständige Schriftartname als auch der Postscript-Name 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
• Transfonter-Webfont-Generator
• Schöne Schriftarten mit @font-face
• Font Library