@font-face

ascent-override

Definiert die Aufstiegsmetrik der Schriftart.

descent-override

Definiert die Abstiegmetrik der Schriftart.

font-display

Bestimmt, wie eine Schriftart angezeigt wird, basierend darauf, ob und wann sie heruntergeladen und gebrauchsfertig 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, 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;

font-feature-settings

Erlaubt die Steuerung über fortgeschrittene typografische Funktionen in OpenType-Schriftarten.

font-variation-settings

Erlaubt die Low-Level-Kontrolle über OpenType- oder TrueType-Schriftvariationen, indem die vier Buchstaben langen Achsennamen der Funktionen zusammen mit ihren Variationswerten spezifiziert werden.

line-gap-override

Definiert die Zeilenlückenmetrik der Schriftart.

size-adjust

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

src

Spezifiziert Verweise auf Schriftressourcen einschließlich Hinweisen zu Schriftformat und Technologie. Ein src 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, url() und local() zusammen zu verwenden, damit die installierte Kopie der Schriftart des Benutzers verwendet wird, wenn sie verfügbar ist, und ansonsten eine Kopie der Schriftart heruntergeladen wird, wenn sie nicht auf dem Gerät des Benutzers gefunden wird.

Wenn die local()-Funktion bereitgestellt wird und einen Schriftartnamen angibt, der auf dem Gerät des Benutzers gesucht werden soll, und wenn der Benutzer-Agent einen Treffer findet, wird diese lokale Schriftart verwendet. Andernfalls wird die Schriftressource, die mit der url()-Funktion angegeben wurde, heruntergeladen und verwendet.

Browser versuchen, Ressourcen in der angegebenen Reihenfolge ihrer Liste zu laden, daher sollte local() normalerweise vor url() geschrieben werden. Beide Funktionen sind optional, sodass ein Regelblock möglich ist, der nur ein oder mehrere local() ohne url() enthält. Wenn spezifischere Schriften mit format() oder tech()-Werten gewünscht sind, sollten diese vor Versionen ohne diese Werte aufgelistet werden, da ansonsten die weniger spezifische Variante zuerst probiert und verwendet würde.

Indem Autoren ihre eigenen Schriften bereitstellen können, ermöglicht @font-face die Gestaltung von Inhalten, ohne auf die sogenannten "web-sicheren" Schriftarten beschränkt zu sein (also die Schriften, die so weit verbreitet sind, dass sie als universell verfügbar gelten). Die Fähigkeit, den Namen einer lokal installierten Schriftart anzugeben, die gesucht und verwendet werden soll, ermöglicht es, die Schriftart über die Grundlagen hinaus anzupassen und dies ohne Abhängigkeit von einer Internetverbindung zu tun.

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

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

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

  cssCopy to Clipboard

  .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 Dokumentkörper 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/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 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 Schriften mit @font-face
• Font Library