src

url()

Spezifiziert eine externe Referenz, bestehend aus einem <url>, gefolgt von optionalen Hinweisen unter Verwendung der Komponentenwerte format() und tech(), die das Format und die Font-Technologie der Ressource angeben, auf die die URL verweist. Die Komponenten format() und tech() sind eine durch Kommas getrennte Liste von Zeichenfolgen bekannter Schriftformate und Technologien. Unterstützt ein User-Agent nicht die Font-Technologie oder die Formate, überspringt er den Download der Font-Ressource. Wenn keine Format- oder Technologiehinweise angegeben sind, wird die Font-Ressource immer heruntergeladen.

format()

Eine optionale Deklaration, die dem url() Wert folgt und dem User-Agent einen Hinweis auf das Font-Format liefert. Wenn der Wert nicht unterstützt oder ungültig ist, kann der Browser die Ressource möglicherweise nicht herunterladen, wodurch Bandbreite gespart wird. Wenn weggelassen, lädt der Browser die Ressource herunter und erkennt dann das Format. Wenn eine Schriftquelle aus Gründen der Abwärtskompatibilität eingeschlossen wird, die nicht in der Liste der definierten Schlüsselwörter enthalten ist, ist die Formatzeichenfolge in Anführungszeichen zu setzen. Mögliche Werte sind im Abschnitt Schriftformate unten beschrieben.

tech()

Eine optionale Deklaration, die dem url() Wert folgt und dem User-Agent einen Hinweis auf die Font-Technologie liefert. Der Wert für tech() kann eines der im Abschnitt Schrifttechnologien beschriebenen Schlüsselwörter sein.

local(<font-face-name>)

Gibt den Namen der Schriftart an, falls diese auf dem Gerät des Benutzers verfügbar ist. Die Einfassung 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 Namens-Tabelle lokal verfügbarer Schriftarten abzugleichen. Welcher Typ von Namen verwendet wird, variiert je nach Plattform und Schriftart, daher sollten Sie beide dieser Namen einbeziehen, um eine korrekte Übereinstimmung über Plattformen hinweg zu gewährleisten. Plattformersetzungen für einen bestimmten Schriftartnamen dürfen nicht verwendet werden.

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

Während die Menge vorinstallierter Schriftarten wahrscheinlich für alle Benutzer eines bestimmten Geräts gleich ist, ist die Menge der vom Benutzer installierten Schriftarten dies nicht. Durch das Erkennen der Menge der vom Benutzer installierten Schriftarten kann eine Seite daher einen Fingerabdruck des Geräts erstellen, was der Webseite hilft, Benutzer im Web zu verfolgen.

Um dies zu verhindern, können Benutzeragenten Benutzer-fonts bei der Verwendung von local() ignorieren.

<font-face-name>

Spezifiziert den vollständigen Namen oder den Postscript-Namen einer lokal installierten Schriftart mit der local() Komponentendeklaration, die eine einzelne Schriftart innerhalb einer größeren Familie eindeutig identifiziert. Der Name kann optional in Anführungszeichen gesetzt werden. Der Name der Schriftart ist nicht case-sensitive.

Der Wert dieses Deskriptors ist eine priorisierte, durch Kommas getrennte Liste externer Referenzen oder lokal installierter Schriftartnamen, wobei jede Ressource mit url() oder local() angegeben wird. Wenn eine Schrift benötigt wird, iteriert der User-Agent über die angegebenen Referenzen und verwendet die erste, die er erfolgreich aktivieren kann. Schriften mit ungültigen Daten oder lokale Schriftarten, die nicht gefunden werden, werden ignoriert, und der User-Agent lädt die nächste Schrift in der Liste.

Wenn mehrere src Deskriptoren festgelegt 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 einschließt, 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 diesem Fall wird sie relativ zum Speicherort des Stylesheets aufgelöst, das die @font-face Regel enthält. Im Fall von SVG-Schriften verweist die URL auf ein Element in einem Dokument mit SVG-Schriftdefinitionen. Wenn der Elementverweis weggelassen wird, wird ein Verweis auf die zuerst definierte Schriftart impliziert. In ähnlicher Weise laden Schriftcontainerformate, die mehr als eine Schriftart enthalten können, nur eine der Schriften für eine gegebene @font-face Regel. Fragmentkennungen werden verwendet, um anzugeben, welche Schriftart geladen werden soll. Wenn ein Containerformat keine definierte Fragmentkennzeichnungs-Schema hat, wird ein 1-basiertes Indizierungsschema (z.B. "font-collection#1" für die erste Schriftart, "font-collection#2" für die zweite Schriftart, usw.) verwendet.

Wenn die Schriftdatei ein Container für mehrere Schriften ist, ist ein Fragmentbezeichner enthalten, um die zu verwendende Unterschrift 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 deren entsprechende Schriftformate. Um zu überprüfen, ob ein Schriftformat von einem Browser innerhalb von CSS unterstützt wird, verwenden Sie die @supports Regel.

Ältere nicht-normalisierte format() Werte haben die folgende äquivalente Syntax; bereitgestellt als eine in Anführungszeichen eingeschlossene Zeichenfolge für Abwärtskompatibilitätsgründe:

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

src = 
  <font-src-list>  

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

<url> = 
  <url()>  |
  <src()>  

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

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<family-name> = 
  <string>         |
  <custom-ident>+  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<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 Schriftartfamilie definiert werden. Die font-family ist MainText genannt. Die erste Schriftart hat eine reguläre Schrift, und die zweite ist eine fette Version derselben Schriftartfamilie.

/* 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 Schriftartenressourcen zu spezifizieren. Eine Schrift unter Verwendung von color-colrv1 Technologie und opentype Format wird durch die Werte von tech() und format() spezifiziert. Eine Farbschrift wird aktiviert, wenn der User-Agent sie unterstützt, und ein opentype Non-Color 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 ein @font-face mit einem einzelnen src Deskriptor verwenden, der mögliche Quellen für die Schriftart auflistet. Da der Browser die erste Ressource verwendet, die er laden kann, sollten die Elemente in der Reihenfolge Ihrer Präferenz für ihre Verwendung angeben sein.

Normalerweise bedeutet das, dass lokale Dateien vor entfernten Dateien und dass Ressourcen mit format() oder tech() Einschränkungen vor Ressourcen erscheinen sollten, die diese nicht haben (anderenfalls würde die weniger eingeschränkte Version immer ausgewählt). Zum Beispiel:

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

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

Einige Browser ignorieren noch nicht ungültige Elemente und schlagen stattdessen den gesamten src Deskriptor fehl, wenn ein 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 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 überprüft werden kann, ob der User-Agent eine Schrifttechnologie mit Hilfe der @supports Regel unterstützt. Der CSS-Block innerhalb von @supports wird angewendet, wenn der User-Agent die Technologie color-COLRv1 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