src

Syntax

/* <url> values */
src: url("https://example.com/path/to/font.woff"); /* Absolute URL */
src: url("path/to/font.woff"); /* Relative URL */
src: url("path/to/svgFont.svg#example"); /* Fragment identifying font */

/* <font-face-name> values */
src: local(font); /* Unquoted name */
src: local(some font); /* Name containing space */
src: local("font"); /* Quoted name */
src: local("some font"); /* Quoted name containing a space */

/* <tech(<font-tech>)> values */
src: url("path/to/fontCOLRv1.otf") tech(color-COLRv1);
src: url("path/to/fontCOLR-svg.otf") tech(color-SVG);

/* <format(<font-format>)> values */
src: url("path/to/font.woff") format("woff");
src: url("path/to/font.otf") format("opentype");

/* Multiple resources */
src:
  url("path/to/font.woff") format("woff"),
  url("path/to/font.otf") format("opentype");

/* Multiple resources with font format and technologies */
src:
  url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
  url("trickster-outline.otf") format(opentype);

Werte

url()

Spezifiziert eine externe Referenz, die aus einem <url> besteht, gefolgt von optionalen Hinweisen mit den Komponentenwerten format() und tech(), die das Format und die Schrifttechnologie der durch die URL referenzierten Ressource spezifizieren. Die Komponenten format() und tech() sind eine kommagetrennte Liste von Strings bekannter Schriftformate und Technologien. Wenn ein Nutzeragent die Schrifttechnologie oder -formate nicht unterstützt, überspringt er das Herunterladen der Schriftressource. Wenn keine Format- oder Technologiehinweise angegeben sind, wird die Schriftressource immer heruntergeladen.

format()

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

tech()

Eine optionale Deklaration, die dem url() Wert folgt und dem Nutzeragenten 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 an, dass der Schriftname verwendet werden soll, wenn die Schrift auf dem Gerät des Benutzers verfügbar ist. Der Einschluss des Schriftnamens 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 Schriftnamen in der Namens-Tabelle lokal verfügbarer Schriften abzugleichen. Welche Art von Namen verwendet wird, variiert je nach Plattform und Schriftart, daher sollten Sie beide Namen einbeziehen, um eine ordnungsgemäße Übereinstimmung über Plattformen hinweg zu gewährleisten. Plattformsubstitutionen für einen bestimmten Schriftnamen dürfen nicht verwendet werden.

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

Während die Anzahl der vorinstallierten Schriften wahrscheinlich für alle Benutzer eines bestimmten Geräts gleich ist, ist die Anzahl der vom Benutzer installierten Schriften dies nicht. Durch das Entdecken der vom Benutzer installierten Schriften kann eine Seite also einen Fingerabdruck für das Gerät erstellen, was der Seite hilft, Benutzer im Web zu verfolgen.

Um dies zu verhindern, können Nutzeragenten die vom Benutzer installierten Schriften ignorieren, wenn sie local() verwenden.

<font-face-name>

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

Beschreibung

Der Wert dieses Descriptors ist eine priorisierte, kommagetrennte Liste externer Referenzen oder lokal installierter Schriftartnamen, wobei jede Ressource mit url() oder local() spezifiziert wird. Wenn eine Schriftart benötigt wird, iteriert der Nutzeragent über die im Satz von Referenzen gelisteten, beginnend mit der ersten, die er erfolgreich aktivieren kann. Schriften mit ungültigen Daten oder nicht gefundene lokale Schriften werden ignoriert, und der Nutzeragent lädt die nächste Schrift in der Liste.

Wenn mehrere src Deskriptoren gesetzt sind, wird nur die zuletzt deklarierte Regel angewandt, 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, selbst 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 zur Position des Stylesheets aufgelöst, das die @font-face Regel enthält. Im Fall von SVG-Schriften verweist die URL auf ein Element innerhalb eines Dokuments, das SVG-Schriftdefinitionen enthält. Wenn der Elternelement-Verweis weggelassen wird, wird eine Referenz zur ersten definierten Schrift impliziert. Ebenso laden Schriftcontainerformate, die mehr als eine Schriftart enthalten können, nur eine der Schriften für eine gegebene @font-face Regel. Fragment-Identifikatoren werden verwendet, um anzuzeigen, welche Schriftart geladen werden soll. Wenn ein Containerformat kein definiertes Fragment-Identifikatorschema besitzt, wird ein 1-basiertes Indexsystem 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 eingeschlossen, um die Subschrift anzugeben, die verwendet werden soll, 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");

Schriftformate

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

Ältere nicht normalisierte format() Werte haben die folgende äquivalente Syntax; aus Gründen der Rückwärtskompatibilität als String in Anführungszeichen bereitgestellt:

Schrifttechnologien

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

Formale Definition

Formale Syntax

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    

Beispiele

Schriftressourcen mit url() und local() angeben

Das folgende Beispiel zeigt, wie zwei Schriftschnitte mit derselben Schriftfamilie definiert werden. Die font-family ist MainText genannt. Der erste Schriftschnitt hat eine normale Schriftart, und der 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", sans-serif;
}

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

Schriftressourcen mit tech() und format() Werten angeben

Das folgende Beispiel zeigt, wie die tech() und format() Werte verwendet werden, um Schriftressourcen zu spezifizieren. Eine Schrift, die die color-colrv1 Technologie und das opentype Format verwendet, wird mit den tech() und format() Werten spezifiziert. Eine Farbenschrift wird aktiviert, wenn der Nutzeragent sie unterstützt, und ein opentype Nicht-Farbenschrift 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", fantasy;
}

Fallbacks für ältere Browser angeben

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

Das bedeutet im Allgemeinen, dass lokale Dateien vor entfernten Dateien erscheinen sollten und dass Ressourcen mit format() oder tech() Einschränkungen vor Ressourcen stehen sollten, die keine haben (anderenfalls würde immer die weniger eingeschränkte Version 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 tech() nicht unterstützt, sollte das erste Element ignorieren und versuchen, die zweite Ressource zu laden.

Einige Browser ignorieren noch keine ungültigen Items, und stattdessen scheitert der gesamte src Deskriptor, 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);
}

Überprüfen, ob der Nutzeragent eine Schriftart unterstützt

Das folgende Beispiel zeigt, wie überprüft werden kann, ob der Nutzeragent eine Schrifttechnologie mit der @supports Regel unterstützt. Der CSS-Block innerhalb von @supports wird angewandt, wenn der Nutzeragent 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", fantasy;
  }
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

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