@font-face

ascent-override

Definiert das Aszendenz-Metrik für die Schriftart.

descent-override

Definiert das Deszendenz-Metrik für die Schriftart.

font-display

Bestimmt, wie eine Schriftart dargestellt wird, basierend darauf, ob und wann sie heruntergeladen und einsatzbereit ist.

font-family

Gibt einen Namen an, der als Schriftartwert 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, 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 Wert ist unterstützt, aber es gibt kein äquivalentes Deskriptor.

font-feature-settings

Ermöglicht die Kontrolle über erweiterte typografische Funktionen in OpenType-Schriftarten.

font-variation-settings

Ermöglicht eine niedrige Ebene der Kontrolle über OpenType- oder TrueType-Schriftvariationen, indem die vier Buchstabenachsen der Merkmale, die variiert werden sollen, zusammen mit ihren Variationswerten angegeben werden.

line-gap-override

Definiert den Zeilenabstand-Metrik für die Schriftart.

size-adjust

Definiert einen Multiplikator für Schriftkonturen und Metriken, die mit dieser Schrift verbunden sind. Dies erleichtert die Harmonisierung der Designs verschiedener Schriftarten bei gleicher Schriftgröße.

src

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

unicode-range

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

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

Wenn die local() Funktion bereitgestellt wird, um eine Schriftart zu spezifizieren, nach der auf dem Gerät des Nutzers gesucht werden soll, und wenn der User-Agent eine Übereinstimmung findet, wird diese lokale Schriftart verwendet. Andernfalls wird die Schriftressource, die mit der url() Funktion angegeben ist, heruntergeladen und verwendet.

Browser versuchen, Ressourcen in der Reihenfolge ihrer Deklarationsliste zu laden, daher sollte local() in der Regel 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 sind, sollten diese vor Versionen aufgelistet werden, die diese Werte nicht besitzen, 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 "web-sicheren" Schriftarten (d.h. 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, nach der gesucht und verwendet werden soll, ermöglicht es, die Schrift jenseits der Grundlagen anzupassen, ohne auf eine Internetverbindung angewiesen zu sein.

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

• Web-Schriften unterliegen denselben Domain-Beschränkungen (Schriftdateien müssen sich auf derselben Domain 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 spezifiziert eine herunterladbare Schriftart zur Verwendung und wendet sie auf den gesamten Dokumentenkörper an:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
      @font-face {
        font-family: "Bitstream Vera Serif Bold";
        src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
      }

      body {
        font-family: "Bitstream Vera Serif Bold", serif;
      }
    </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>

Die Ausgabe dieses Beispielcodes sieht folgendermaßen aus:

In diesem Beispiel wird die lokale Kopie des Nutzers von "Helvetica Neue Bold" verwendet; wenn der Nutzer diese Schriftart nicht installiert hat (sowohl der vollständige Schriftname als auch der Postscript-Name werden versucht), wird stattdessen die herunterladbare Schriftart "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