src

url()

Gibt einen externen Verweis bestehend aus einem <url> an, gefolgt von optionalen Hinweisen unter Verwendung der format() und tech() Komponentenwerte, die das Format und die Schriftarttechnologie der durch die URL referenzierten Ressource angeben. Die format() und tech() Komponenten sind eine kommagetrennte Liste von Zeichenketten bekannter Schriftformate und Technologien. Wird die Schrifttechnologie oder die Formate von einem Benutzeragenten nicht unterstützt, wird die Schriftressource nicht heruntergeladen. Werden keine Format- oder Technologiehinweise angegeben, wird die Schriftressource immer heruntergeladen.

format()

Eine optionale Deklaration, die dem url() Wert folgt und dem Benutzeragenten einen Hinweis auf das Schriftformat gibt. Wenn der Wert nicht unterstützt oder ungültig ist, kann der Browser die Ressource möglicherweise nicht herunterladen, was Bandbreite spart. Wird der Wert weggelassen, lädt der Browser die Ressource herunter und erkennt dann das Format. Wenn eine Schriftquelle für Abwärtskompatibilität aufgenommen wird, die nicht in der Liste der definierten Schlüsselwörter enthalten ist, schließen Sie die Formatzeichenfolge in Anführungszeichen ein. Mögliche Werte sind im Abschnitt Schriftformate unten beschrieben.

tech()

Eine optionale Deklaration, die dem url() Wert folgt und dem Benutzeragenten einen Hinweis auf die Schrifttechnologie gibt. Der Wert für tech() kann eines der Schlüsselwörter sein, die in Schrifttechnologien beschrieben sind.

local(<font-face-name>)

Gibt den Schriftartnamen an, falls die Schriftart auf dem Gerät des Benutzers verfügbar ist. Das Einschließen des Schriftartnamens in Anführungszeichen ist optional.

Hinweis: Für OpenType und TrueType Schriften wird <font-face-name> verwendet, um entweder den Postscript-Namen oder den vollständigen Schriftartnamen in der Namensdatei der lokal verfügbaren Schriften abzugleichen. Welcher Name verwendet wird, variiert je nach Plattform und Schrift, daher sollten Sie beide Namen einschließen, um einen ordnungsgemäßen Abgleich über verschiedene Plattformen zu gewährleisten. Plattformsubstitutionen für einen gegebenen Schriftartnamen dürfen nicht verwendet werden.

Hinweis: Lokale verfügbare Schriften wurden möglicherweise auf dem Gerät des Benutzers vorinstalliert oder aktiv vom Benutzer installiert.

Während der Satz von vorinstallierten Schriften vermutlich für alle Benutzer eines bestimmten Geräts gleich ist, trifft dies auf die Menge der benutzerinstallierten Schriften nicht zu. Durch das Ermitteln der Menge benutzerinstallierter Schriften kann eine Seite daher einen Fingerabdruck für das Gerät erstellen, was der Seite hilft, Benutzer über das Web zu verfolgen.

Um dies zu verhindern, können Benutzeragenten benutzerinstallierte Schriften ignorieren, wenn local() verwendet wird.

<font-face-name>

Gibt den vollständigen Namen oder Postscript-Namen einer lokal installierten Schrift mittels des local() Komponentenwerts an, der eine einzelne Schrift innerhalb einer größeren Familie eindeutig identifiziert. Der Name kann optional in Anführungszeichen eingeschlossen werden. Der Schriftname ist nicht case-sensitiv.

Der Wert dieses Deskriptors ist eine priorisierte, kommagetrennte Liste von externen Referenzen oder lokal installierten Schriftartnamen, wobei jede Ressource unter Verwendung von url() oder local() angegeben wird. Wenn eine Schriftart benötigt wird, iteriert der Benutzeragent über die Liste der angegebenen Verweise und verwendet den ersten, den er erfolgreich aktivieren kann. Schriften mit ungültigen Daten oder lokale Schriftarten, die nicht gefunden werden, werden ignoriert und der Benutzeragent lädt die nächste Schrift in der Liste.

Wenn mehrere src Deskriptoren gesetzt sind, wird nur die zuletzt deklarierte Regel angewendet, die in der Lage ist, eine Ressource zu laden. Wenn der letzte src-Deskriptor eine Ressource laden kann und keine local() Schrift enthält, kann der Browser externe Schriftartdateien herunterladen und die lokale Version ignorieren, auch wenn diese auf dem Gerät verfügbar ist.

Wie bei anderen URLs in CSS kann die URL relativ sein, in welchem Fall sie relativ zur Position des Stylesheets aufgelöst wird, das die @font-face Regel enthält. Im Fall von SVG-Schriften zeigt die URL auf ein Element innerhalb eines Dokuments, das SVG-Schriftdefinitionen enthält. Wenn die Elementreferenz weggelassen wird, wird auf die zuerst definierte Schrift Bezug genommen. In ähnlicher Weise laden Schriftcontainerformate, die mehr als eine Schrift enthalten können, nur eine der Schriften für eine gegebene @font-face Regel. Fragment-Identifikatoren werden verwendet, um anzugeben, welche Schrift geladen werden soll. Wenn ein Containerformat kein definiertes Fragment-Identifikator-Schema hat, wird ein 1-basierendes Indexierungsschema verwendet (z. B. "font-collection#1" für die erste Schrift, "font-collection#2" für die zweite Schrift usw.).

Wenn die Schriftdatei ein Container für mehrere Schriften ist, wird ein Fragment-Identifikator enthalten, um die zu verwendende Teil-Schrift anzugeben, wie unten gezeigt:

/* WhichFont is the PostScript name of a font in the font file */
src: url(collection.otc#WhichFont);
/* WhichFont is the element id of a font in the SVG Font file */
src: url(fonts.svg#WhichFont);

Die folgende Tabelle zeigt die gültigen Schrift-Schlüsselwörter und ihre entsprechenden Schriftformate. Um zu prüfen, ob ein Schriftformat innerhalb von CSS von einem Browser unterstützt wird, verwenden Sie die @supports Regel.

Ältere nicht-normalisierte format() Werte haben die folgenden äquivalenten Syntaxe; aus Gründen der Abwärtskompatibilität als Zeichenkette in Anführungszeichen bereitgestellt:

Die folgende Tabelle zeigt gültige Werte für den tech() Deskriptor und ihre entsprechenden Schrifttechnologien. Um zu prüfen, ob eine Schrifttechnologie innerhalb von CSS von einem Browser unterstützt wird, verwenden Sie die @supports At-Regel.

<url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?  |
local( <family-name> )

<font-format> = [ <string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]

<font-tech> = [ <font-features-tech> | <color-font-tech> | variations | palettes | incremental-patch | incremental-range | incremental-auto ]

<font-features-tech> = [ features-opentype | features-aat | features-graphite ]

<color-font-tech> = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]

Das folgende Beispiel zeigt, wie zwei Schriftarten mit derselben Schriftfamilie definiert werden. Die font-family heißt MainText. Die erste Schriftart ist eine reguläre Schrift, und die zweite ist eine fette Version derselben Schriftfamilie.

/* Defining a regular font face */
@font-face {
  font-family: MainText;
  src:
    local(Futura-Medium),
    url("FuturaMedium.woff") format("woff"),
    url("FuturaMedium.otf") format("opentype");
}

/* Defining a different bold font face for the same family */
@font-face {
  font-family: MainText;
  src:
    local(Gill Sans Bold) /* full font name */,
    local(GillSans-Bold) /* postscript name */,
    url("GillSansBold.woff") format("woff"),
    url("GillSansBold.otf") format("opentype"),
    url("GillSansBold.svg#MyFontBold"); /* Referencing an SVG font fragment by id */
  font-weight: bold;
}

/* Using the regular font face */
p {
  font-family: MainText;
}

/* Font-family is inherited, but bold fonts are used */
p.bold {
  font-weight: bold;
}

Das folgende Beispiel zeigt, wie die tech() und format() Werte verwendet werden, um Schriftressourcen anzugeben. Eine Schrift, die color-colrv1 Technologie und opentype Format verwendet, wird unter Nutzung der tech() und format() Werte spezifiziert. Eine Farbschrift wird aktiviert, wenn der Benutzeragent sie unterstützt, und eine opentype Nicht-Farbschrift wird als Fallback angegeben.

@font-face {
  font-family: "Trickster";
  src:
    url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
    url("trickster-outline.otf") format(opentype);
}

/* Using the font face */
p {
  font-family: "Trickster";
}

Browser sollten eine @font-face mit einem einzelnen src Deskriptor verwenden, der mögliche Quellen für die Schrift aufzählt. Da der Browser die erste Ressource verwenden wird, die er laden kann, sollten die Elemente in der Reihenfolge Ihrer bevorzugten Verwendung angegeben werden.

Im Allgemeinen bedeutet dies, dass lokale Dateien vor den Remote-Dateien erscheinen sollten und dass Ressourcen mit format() oder tech() Einschränkungen vor Ressourcen erscheinen sollten, die diese nicht haben (andernfalls würde immer die weniger eingeschränkte Version gewählt). Zum Beispiel:

@font-face {
  font-family: "MgOpenModernaBold";
  src:
    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
    url("MgOpenModernaBold.otf") format(opentype);
}

Ein Browser, der oben tech() nicht unterstützt, sollte das erste Element ignorieren und versuchen, die zweite Ressource zu laden.

Einige Browser ignorieren noch nicht ungültige Elemente und schlagen stattdessen den gesamten src Deskriptor fehl, wenn irgendein Wert ungültig ist. Wenn Sie mit diesen Browsern arbeiten, können Sie mehrere src Deskriptoren als Fallbacks angeben. Beachten Sie, dass mehrere src Deskriptoren in umgekehrter Reihenfolge versucht werden, sodass am Ende unser normaler Deskriptor mit allen Elementen bleibt.

@font-face {
  font-family: "MgOpenModernaBold";
  src: url("MgOpenModernaBold.otf") format(opentype);
  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);
  src:
    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
    url("MgOpenModernaBold.otf") format(opentype);
}

Das folgende Beispiel zeigt, wie überprüft wird, ob der Benutzeragent eine Schrifttechnologie mit der @supports Regel unterstützt. Der CSS-Block innerhalb von @supports wird angewendet, wenn der Benutzeragent die color-COLRv1 Technologie unterstützt.

@supports font-tech(color-COLRv1) {
  @font-face {
    font-family: "Trickster";
    src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);
  }

  .colored_text {
    font-family: "Trickster";
  }
}

• @font-face
• @supports
• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-feature-settings
• font-variation-settings
• unicode-range