unicode-range

Die CSS-Eigenschaft unicode-range wird von @font-face verwendet, um die Zeichen zu definieren, die von der Schriftart unterstützt werden.

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  unicode-range: U+00-FF; /* Define the available characters */
}

Mit anderen Worten, @font-face bezieht sich auf die Eigenschaft und ermittelt, ob die Schriftart heruntergeladen und verwendet werden soll, basierend darauf, ob die Zeichen oder der Zeichenbereich mit denen im HTML-Dokument übereinstimmen.

Schriftart: Hallo HTML, stimmen einige der folgenden Zeichen mit denen auf der Seite überein?
HTML: Ja, viele davon tun es.
Schriftart: Großartig, hier ist eine Schriftdatei, die Sie herunterladen sollten, um diese Zeichen anzuzeigen.

Die wichtige semantische Unterscheidung, die wir hier hervorheben sollten, ist, dass unicode-range bestimmt, für welche Zeichen eine Schriftart verwendet werden kann, und nicht, für welche Zeichen eine Schriftart verfügbar ist. Mit anderen Worten, wenn wir eine unicode-range auf @font-face deklarieren und die Zeichen, die in einem HTML-Dokument geladen wurden, mit diesem Bereich übereinstimmen, wird die Schriftart heruntergeladen und verwendet.

Sie können sich die Leistungsvorteile vorstellen, die sich mit dieser Eigenschaft ergeben. Zum Beispiel können wir eine benutzerdefinierte Schriftart nur laden, wenn sie spezifische Zeichen unterstützt, anstatt die Schriftart immer in allen Situationen zu laden.

Dank eines praktischen Tricks von Jake Archibald gibt es sogar eine Möglichkeit, zwei @font-face-Sets in derselben font-face-Eigenschaftsdeklaration zu kombinieren. Die Idee ist, dass ein @font-face-Set das andere basierend auf dem übereinstimmenden unicode-range überschreibt, wodurch die Leistung optimiert oder einfach die Typografie auf einer Seite verbessert wird.

Werte

Jeder Unicode-Zeichencode oder -bereich ist ein akzeptabler Wert für unicode-range. Sie werden feststellen, dass Unicode-Punkte mit U+ gefolgt von bis zu sechs Zeichen, die den Zeichencode bilden, vorangestellt sind. Punkte oder Bereiche, die diesem Format nicht folgen, gelten als ungültig und führen dazu, dass die Eigenschaft ignoriert wird.

• Einzelnes Zeichen (z. B. U+26)
• Zeichenbereich (z. B. U+0025-00FF)
• Platzhalterbereich (z. B. U+4??)

Der Platzhalterbereich ist der kniffligste von allen. Jedes ? steht für einen Platzhalter, bei dem jeder Wert übereinstimmt. Man würde denken, dass Sie das Ganze mit etwas wie diesem als Platzhalter verwenden können

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
  unicode-range: U+??????; /* This does not work! */
}

Dies funktioniert jedoch nicht. Der Grund dafür ist, dass ein führender ? einen Zeichencode impliziert, der mit 0 beginnt, was bedeutet, dass bis zu fünf Fragezeichen verwendet werden können, obwohl Unicode insgesamt bis zu sechs Zeichen akzeptiert.

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
  unicode-range: U+?????; /* This works and is equivalent to U+0????? */
}

Es gibt eine Menge von Unicode-Optionen da draußen. Basic Latin (0020—007F) ist wahrscheinlich der gebräuchlichste Bereich für englische Websites, aber unicode-table.com bietet eine umfassende Liste aller verfügbaren Bereiche mit Codes für bestimmte Zeichen.

Browser-Unterstützung

Weitere Lektüre

• CSS Fonts Module Level 3 Spezifikation
• Unicode Table: Eine Ressource zum Nachschlagen von Unicode-Zeichensätzen und -Codes.
• Verwendung von @font-face: Ein Beitrag von CSS-Tricks, der erklärt, wie @font-face mit verschiedenen Techniken und funktionierenden Beispielen funktioniert.
• Was ist mit der Deklaration von Schriftarteigenschaften auf @font-face los?: Ein Beitrag von CSS-Tricks, der insofern relevant ist, als dass übereinstimmende Werte in Schriftarteigenschaften verwendet werden können, um zu bestimmen, ob eine benutzerdefinierte Schriftart vom Browser heruntergeladen und verwendet wird.