src

url()

Gibt eine externe Referenz an, die aus einem <url> besteht, gefolgt von optionalen Hinweisen mit den format()- und tech()-Komponentenwerten, die das Format und die Schrifttechnologie der Ressource angeben, die durch die URL referenziert wird. Die format()- und tech()-Komponenten sind eine durch Kommas getrennte Liste von bekannten Schriftformaten und Technologien. Wenn ein Benutzeragent die Schrifttechnologie oder Formate nicht unterstützt, überspringt er das Herunterladen der Schriftressource. Wenn keine Format- oder Technologiehinweise angegeben werden, 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 nicht herunterladen, was möglicherweise Bandbreite spart. Wird es weggelassen, lädt der Browser die Ressource herunter und erkennt dann das Format. Wenn Sie eine Schriftquelle für die Abwärtskompatibilität einschließen, die nicht in der Liste der definierten Schlüsselwörter enthalten ist, schließen Sie die Formatzeichenkette in Anführungszeichen ein. Mögliche Werte werden 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 in Schrifttechnologien beschriebenen Schlüsselwörter sein.

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: Bei OpenType- und TrueType-Schriftarten wird <font-face-name> verwendet, um entweder den Postscript-Namen oder den vollständigen Schriftartnamen in der Namens-Tabelle lokal verfügbarer Schriftarten abzugleichen. Welche Art von Namen verwendet wird, variiert je nach Plattform und Schriftart, daher sollten Sie beide dieser Namen einschließen, um ein korrektes Matching auf allen Plattformen zu gewährleisten. Plattformersetzungen für einen bestimmten Schriftartnamen dürfen nicht verwendet werden.

Hinweis: Lokal verfügbare Schriftarten können entweder vorinstalliert auf dem Gerät des Benutzers sein oder aktiv von ihm installiert worden sein.

Während die Menge der vorinstallierten Schriftarten wahrscheinlich für alle Benutzer eines bestimmten Geräts gleich ist, ist die Menge der benutzerinstallierten Schriftarten nicht gleich. Indem die Menge der benutzerinstallierten Schriftarten entdeckt wird, kann eine Seite daher einen Fingerprint für das Gerät erstellen, was der Seite hilft, Benutzer im Web zu verfolgen.

Zur Vermeidung dieses Problems können Benutzeragenten benutzerinstallierte Schriftarten ignorieren, wenn local() verwendet wird.

<font-face-name>

Gibt den vollständigen Namen oder den Postscript-Namen einer lokal installierten Schriftart mit dem local()-Komponentenwert an, die ein einzelnes Schriftbild innerhalb einer größeren Familie eindeutig identifiziert. Der Name kann optional in Anführungszeichen gesetzt werden. Der Schriftzugname ist nicht case-sensitive.

Der Wert dieses Deskriptors ist eine priorisierte, durch Kommas getrennte Liste von externen Referenzen oder lokal installierten Schriftbildnamen, wobei jede Ressource mit url() oder local() angegeben wird. Wenn eine Schriftart benötigt wird, durchläuft der Benutzeragent die Liste der angegebenen Referenzen und verwendet die erste, die er erfolgreich aktivieren kann. Schriftarten mit ungültigen Daten oder lokal nicht gefundene Schriftbilder 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 Schriftdateien herunterladen und die lokale Version ignorieren, auch wenn eine auf dem Gerät verfügbar ist.

Wie bei anderen URLs in CSS kann die URL relativ sein, in welchem Fall sie relativ zum Standort des Stylesheets mit der @font-face Regel aufgelöst wird. Im Falle von SVG-Schriftarten zeigt die URL auf ein Element innerhalb eines Dokuments, das SVG-Schriftdefinitionen enthält. Wenn die Elementreferenz weggelassen wird, wird ein Verweis auf die zuerst definierte Schrift impliziert. In ähnlicher Weise laden Schrifttypencontainerformate, die mehr als eine Schrift enthalten können, nur eine der Schriften für eine gegebene @font-face Regel. Fragmentidentifikatoren werden verwendet, um anzugeben, welche Schrift geladen werden soll. Wenn einem Containerformat ein definiertes Fragmentidentifikator-Schema fehlt, wird ein einfach 1-basiertes Indexierungsschema (z.B. "font-collection#1" für die erste Schrift, "font-collection#2" für die zweite Schrift usw.) verwendet.

Wenn die Schriftdatei ein Container für mehrere Schriften ist, wird ein Fragmentidentifikator hinzugefügt, um das zu verwendende Unter-Schriftbild 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 von einem Browser innerhalb von CSS unterstützt wird, verwenden Sie die @supports-Regel.

Ältere nicht normalisierte format()-Werte haben folgende äquivalente Syntax; 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 deren entsprechende Schrifttechnologien. Um zu prüfen, ob eine Schrifttechnologie von einem Browser innerhalb von CSS unterstützt wird, verwenden Sie die @supports-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 man zwei Schriftbilder mit derselben Schriftfamilie definiert. Die font-family wird MainText genannt. Das erste Schriftbild ist eine reguläre Schrift und das zweite 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 zur Angabe von Schriftsressourcen verwendet werden. Eine Schrift, die die color-colrv1-Technologie und das opentype-Format verwendet, wird durch die tech()- und format()-Werte spezifiziert. Eine Farbschrift wird aktiviert, wenn der Benutzeragent sie unterstützt, und eine opentype-Nichtfarbe wird als Fallback bereitgestellt.

@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-Regel mit einem einzigen src-Deskriptor verwenden, der mögliche Quellen für die Schrift auflistet. Da der Browser die erste Ressource verwendet, die er laden kann, sollten die Elemente in der Reihenfolge Ihrer Präferenz für deren Verwendung angegeben werden.

Generell bedeutet das, dass lokale Dateien vor entfernten Dateien erscheinen sollten und dass Ressourcen mit format()- oder tech()-Einschränkungen vor Ressourcen erscheinen sollten, die keine haben (ansonsten würde die weniger einschränkende Version immer ausgewählt werden). Zum Beispiel:

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

Ein Browser, der das tech() oben 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 die ganze src-Regel fehl, wenn ein Wert ungültig ist. Wenn Sie mit diesen Browsern arbeiten, können Sie mehrere src-Deskriptoren als Fallbacks festlegen. Beachten Sie, dass mehrere src-Deskriptoren in umgekehrter Reihenfolge versucht werden, so dass wir am Ende unseren normalen Deskriptor mit allen Elementen haben.

@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 Sie überprüfen, 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