@font-face
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
* Some parts of this feature may have varying levels of support.
Die @font-face
CSS At-Regel definiert eine benutzerdefinierte Schriftart, mit der Text dargestellt wird. Die Schriftart kann entweder von einem Remote-Server oder von einer lokal auf dem Computer des Benutzers installierten Schriftart geladen werden.
Syntax
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff");
}
Deskriptoren
ascent-override
-
Definiert die Ascent-Metrik für die Schriftart.
descent-override
-
Definiert die Descent-Metrik für die Schriftart.
font-display
-
Legt fest, wie eine Schriftart basierend darauf angezeigt wird, ob und wann sie heruntergeladen und einsatzbereit ist.
font-family
-
Gibt einen Namen an, der als Wert für die Schriftpropperties 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 zu spezifizieren, 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 zu spezifizieren, 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 zu spezifizieren, der von einer Schriftart unterstützt wird, z. B.font-weight: 100 400;
. font-feature-settings
-
Ermöglicht die Steuerung über erweiterte typografische Funktionen in OpenType-Schriftarten.
font-variation-settings
-
Ermöglicht die Low-Level-Steuerung von OpenType- oder TrueType-Schriftvariationen durch Angabe der vierstelligen Achsennamen und ihrer entsprechenden Variationswerte.
line-gap-override
-
Definiert die Line-Gap-Metrik für die Schriftart.
size-adjust
-
Definiert einen Multiplikator für Glyphen-Umrisse und Metriken, die mit dieser Schriftart verbunden sind. Dies erleichtert die Harmonisierung der Designs verschiedener Schriftarten bei derselben Schriftgröße.
src
-
Gibt Verweise auf Schriftressourcen an, einschließlich Hinweise auf das Schriftformat und die Technologie. Eine
src
ist erforderlich, damit die@font-face
-Regel gültig ist. unicode-range
-
Der Bereich von Unicode-Codepunkten, die von der Schriftart verwendet werden sollen.
Beschreibung
Es ist üblich, sowohl url()
als auch local()
zusammen zu verwenden, sodass die lokal installierte Kopie der Schriftart des Benutzers verwendet wird, falls diese verfügbar ist, und andernfalls eine Kopie der Schriftart heruntergeladen wird.
Wenn die local()
-Funktion bereitgestellt wird, die einen Schriftnamen angibt, der auf dem Gerät des Benutzers gesucht wird, und 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 Listendeklaration zu laden. Daher sollte local()
normalerweise vor url()
geschrieben werden. Beide Funktionen sind optional, sodass ein Regelblock, der nur eine oder mehrere local()
-Angaben 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 enthalten, da andernfalls die weniger spezifische Variante zuerst getestet und verwendet würde.
Durch die Möglichkeit, eigene Schriftarten bereitzustellen, ermöglicht @font-face
die Gestaltung von Inhalten, ohne auf die sogenannten "web-sicheren" Schriftarten beschränkt zu sein (d. h. die Schriftarten, die so häufig sind, dass sie als universell verfügbar gelten). Die Möglichkeit, den Namen einer lokal installierten Schriftart anzugeben, die verwendet werden soll, bietet die Möglichkeit, die Schriftart über die Grundlagen hinaus anzupassen, ohne dabei auf eine Internetverbindung angewiesen zu sein.
Hinweis:
Strategien zum Laden von Schriftarten in älteren Browsern werden auf der Seite zum src
-Deskriptor beschrieben.
Die At-Regel @font-face
kann nicht nur auf oberster Ebene von CSS, sondern auch innerhalb jeder CSS Bedingungsgruppen-At-Regel verwendet werden.
MIME-Typen für Schriftarten
Format | MIME-Typ |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open Font Format | font/woff |
Web Open Font Format 2 | font/woff2 |
Hinweise
-
Web-Schriftarten 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 Einschrä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; } }
Formale Syntax
@font-face =
@font-face { <declaration-list> }
Beispiele
Spezifikation einer herunterladbaren Schriftart
Dieses Beispiel spezifiziert eine herunterladbare Schriftart zur Verwendung und wendet sie auf den gesamten Körper des Dokuments 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;
}
Spezifikation lokaler Schriftersatzoptionen
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 namens "MgOpenModernaBold.ttf" verwendet:
@font-face {
font-family: "MyHelvetica";
src:
local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-face-rule |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@font-face | ||||||||||||
OpenType CBDT and CBLC rendering | ||||||||||||
OpenType COLRv0 rendering | ||||||||||||
OpenType COLRv1 rendering | ||||||||||||
OpenType SBIX rendering | ||||||||||||
OpenType SVG rendering | ||||||||||||
SVG fonts | ||||||||||||
WOFF | ||||||||||||
WOFF 2 | ||||||||||||
ascent-override | ||||||||||||
descent-override | ||||||||||||
font-display | ||||||||||||
font-family | ||||||||||||
font-feature-settings | ||||||||||||
font-stretch | ||||||||||||
font-style | ||||||||||||
font-variant | ||||||||||||
font-variation-settings | ||||||||||||
font-weight | ||||||||||||
line-gap-override | ||||||||||||
size-adjust | ||||||||||||
src | ||||||||||||
Drop invalid item (not src string) | ||||||||||||
format(keyword) | ||||||||||||
format('*-variations') | ||||||||||||
tech(keyword) | ||||||||||||
unicode-range |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.