@font-face

ascent-override

Definiert die Aufstiegsmetrik für die Schriftart.

descent-override

Definiert die Abstiegsmessung für die Schriftart.

font-display

Bestimmt, wie eine Schriftart angezeigt wird, basierend darauf, ob und wann sie heruntergeladen und verwendet werden kann.

font-family

Gibt einen Namen an, der als Schriftart-Wert für Schriftattribute verwendet wird.

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-Schriftarten.

font-variation-settings

Ermöglicht die niedrigstufige Kontrolle über OpenType- oder TrueType-Schriftvariationen, indem die vierbuchstabigen Achsennamen der zu ändernden Funktionen zusammen mit ihren Variationswerten angegeben werden.

line-gap-override

Definiert die Linienabstand-Metrik 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 Schriftarten, wenn sie in derselben Schriftgröße gerendert werden.

src

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

unicode-range

Der Bereich von Unicode-Codepunkten, der von der Schriftart verwendet werden soll.

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

Wenn die Funktion local() bereitgestellt wird, die einen Schriftartnamen zum Suchen auf dem Benutzergerät angibt, und wenn der Benutzeragent eine Übereinstimmung findet, wird diese lokale Schriftart verwendet. Andernfalls wird die über die Funktion url() 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, daher ist ein Regelblock, der nur einen oder mehrere local()-Einträge ohne url() enthält, möglich. Wenn spezifischere Schriftarten mit format() oder tech()-Werten gewünscht sind, sollten diese vor Versionen aufgelistet werden, die diese Werte nicht haben, da ansonsten die weniger spezifische Variante zuerst ausprobiert und verwendet würde.

Indem Autoren ihre eigenen Schriftarten bereitstellen können, ermöglicht @font-face das Design von Inhalten, ohne auf die sogenannten "websicheren" Schriftarten (d. h. die Schriftarten, die so verbreitet sind, dass sie als universell verfügbar gelten) beschränkt zu sein. Die Möglichkeit, den Namen einer lokal installierten Schriftart anzugeben, die gefunden und verwendet werden soll, ermöglicht es, die Schriftart über die Grundlagen hinaus anzupassen, ohne auf eine Internetverbindung angewiesen zu sein.

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

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

• @font-face kann nicht innerhalb eines CSS-Selektors deklariert werden. Zum Beispiel funktioniert Folgendes nicht:

  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 Körper 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 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 ausprobiert), 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