@font-face

ascent-override

Definiert die Aufstiegsmetrik für die Schriftart.

descent-override

Definiert die Abstiegsmetrik für die Schriftart.

font-display

Bestimmt, wie eine Schriftart angezeigt wird, basierend darauf, ob und wann sie heruntergeladen und zur Verwendung bereit ist.

font-family

Gibt einen Namen an, der als Schriftartwert für Schriftarteigenschaften 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, um einen Bereich anzugeben, der von einer Schriftart unterstützt wird, beispielsweise font-stretch: 50% 200%;

font-style

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

font-feature-settings

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

font-variation-settings

Ermöglicht die Steuerung von OpenType- oder TrueType-Schriftvariationen auf niedriger Ebene, 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 Glyphenumrisse und mit dieser Schriftart verbundene Metriken. Dies erleichtert es, die Designs verschiedener Schriftarten zu harmonisieren, wenn sie in derselben Schriftgröße gerendert werden.

src

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

unicode-range

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

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

Wenn die local()-Funktion 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 url()-Funktion angegebene Schriftartressource 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 möglich ist, der nur eine oder mehrere local()-Angaben ohne url() enthält. Wenn spezifischere Schriftarten mit format() oder tech()-Werten gewünscht sind, sollten diese vor den Versionen ohne diese Werte aufgeführt werden, da ansonsten die weniger spezifische Variante zuerst versucht und verwendet würde.

Indem Autoren die Möglichkeit gegeben wird, ihre eigenen Schriftarten bereitzustellen, ermöglicht @font-face die Gestaltung von Inhalten ohne Beschränkung auf die sogenannten "web-sicheren" Schriftarten (d. h. die Schriftarten, die so häufig sind, dass sie als universell verfügbar gelten). Die Fähigkeit, den Namen einer lokal installierten Schriftart anzugeben, nach der gesucht und verwendet werden soll, ermöglicht es, die Schrift über die Grundlagen hinaus anzupassen, ohne auf eine Internetverbindung angewiesen zu sein.

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

• Webschriftarten unterliegen derselben Domänenbeschränkung (Schriftdateien müssen sich auf derselben Domäne wie die Seite befinden, die sie verwendet), es sei denn, es werden HTTP-Zugriffskontrollen verwendet, um diese Einschrä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 des Benutzers von "Helvetica Neue Bold" verwendet; wenn der Benutzer diese Schriftart nicht installiert hat (sowohl der volle 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 Schriften mit @font-face
• Schriftbibliothek