@font-face

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 angezeigt wird, basierend darauf, ob und wann sie heruntergeladen und bereit zur Verwendung ist.

font-family

Gibt einen Namen an, der als Schriftartwert für Schriftarteigenschaften verwendet wird.

font-stretch

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

font-style

Ein font-style-Wert. Akzeptiert zwei Werte, um einen Bereich anzugeben, der von einer Schriftart unterstützt wird, zum Beispiel 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, zum Beispiel font-weight: 100 400;

Hinweis: Der font-variant Deskriptor wurde 2018 aus der Spezifikation entfernt. Der font-variant-Eigenschaftswert wird unterstützt, aber es gibt kein entsprechendes Deskriptor-Äquivalent.

font-feature-settings

Ermöglicht die Steuerung von fortgeschrittenen typografischen Funktionen in OpenType-Schriftarten.

font-variation-settings

Ermöglicht die Low-Level-Steuerung von 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 Zeilenabstandmetrik für die Schriftart.

size-adjust

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

src

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

unicode-range

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

Es ist üblich, sowohl url() als auch local() zusammen zu verwenden, sodass die auf dem Benutzergerät installierte Kopie der Schriftart verwendet wird, wenn sie verfügbar ist, und andernfalls eine Kopie der Schriftart heruntergeladen wird.

Wenn die local() Funktion bereitgestellt wird, die einen Schriftartnamen auf dem Benutzergerät sucht, und wenn der User-Agent eine Übereinstimmung findet, wird diese lokale Schriftart verwendet. Andernfalls wird die mit der url() Funktion angegebene Schriftressource heruntergeladen und verwendet.

Browser versuchen, Ressourcen in der Reihenfolge ihrer Auflistung zu laden; normalerweise sollte local() vor url() geschrieben werden. Beide Funktionen sind optional, sodass ein Regelblock ohne url(), aber nur mit local() möglich ist. Wenn spezifischere Schriftarten mit format() oder tech() Werten gewünscht sind, sollten diese vor den Versionen aufgelistet werden, die diese Werte nicht haben, da die weniger spezifische Variante sonst zuerst ausprobiert und verwendet wird.

Indem Autoren ihre eigenen Schriftarten bereitstellen können, ermöglicht @font-face das Design von Inhalten, ohne auf die sogenannten "web-sicheren" Schriftarten beschränkt zu sein (das heißt, Schriftarten, die so verbreitet sind, dass sie als universell verfügbar gelten). Die Möglichkeit, den Namen einer lokal installierten Schriftart zu spezifizieren, um diese zu suchen und zu verwenden, ermöglicht eine Anpassung der Schriftart über die grundlegenden Optionen hinaus, ohne dass eine Internetverbindung erforderlich ist.

Die @font-face At-Regel kann nicht nur auf oberster Ebene einer CSS verwendet werden, sondern auch innerhalb jeder CSS-Bedingungsgruppen-At-Regel.

• Web-Fonts unterliegen derselben Domänenbeschränkung (Schriftdateien müssen sich auf derselben Domäne wie die sie verwendende Seite befinden), es sei denn, es werden HTTP-Zugriffskontrollen verwendet, um diese Beschränkung zu lockern.

• @font-face kann nicht innerhalb eines CSS-Selektors deklariert werden. Zum Beispiel wird das Folgende nicht funktionieren:

  css

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

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

Dieses Beispiel gibt eine herunterladbare Schriftart an, die auf den gesamten Body des Dokuments angewendet wird:

<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;
}

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

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

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