Die unicode-rangeEigenschaft in CSS wird von verwendet @font-face, 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-facebezieht sich auf die Eigenschaft und bestimmt, ob die Schriftart heruntergeladen und verwendet werden soll oder nicht, basierend darauf, ob die Zeichen oder der Zeichenbereich mit denen im HTML-Dokument übereinstimmen.
Schriftart: Hey HTML, stimmt eines der folgenden Zeichen mit dem auf der Seite überein?
HTML: Ja, einige von ihnen tun es.
Font-Face: Großartig, hier ist eine Font-Datei, die Sie herunterladen sollten, um diese Zeichen anzuzeigen.
Die wichtige semantische Unterscheidung, die wir hier hervorheben sollten, besteht darin, zu unicode-rangebestimmen, für welche Zeichen eine Schriftart verwendet werden kann, anstatt für welche Zeichen eine Schriftart verfügbar ist. Mit anderen Worten erklären , wenn wir eine unicode-rangeauf @font-faceund die Zeichen , die in einem HTML - Dokument Spiel geladen haben , dass Bereich, dann werden die Schriftart Herunterladen und zur Verwendung zugeführt werden.
Sie können sich die Leistungsvorteile vorstellen, die sich mit dieser Eigenschaft ergeben. Beispielsweise können wir eine benutzerdefinierte Schriftart nur laden, wenn sie bestimmte Zeichen enthält, anstatt die Schriftart in allen Situationen immer zu laden.
Dank eines praktischen Tricks von Jake Archibald gibt es sogar eine Möglichkeit, zwei @font-faceSätze auf derselben font-faceEigenschaftsdeklaration zu kombinieren . Die Idee ist, dass ein @font-faceSatz den anderen überschreibt, basierend auf der übereinstimmenden unicode-range, optimierten Leistung oder einfach der Verbesserung der Typografie auf einer Seite.
Werte
Jeder Unicode-Zeichencode oder -Bereich ist ein akzeptabler unicode-rangeWert. Sie werden feststellen, dass vor Unicode-Punkten U+bis zu sechs Zeichen stehen, aus denen der Zeichencode besteht. Punkte oder Bereiche, die diesem Format nicht folgen, werden als ungültig betrachtet und führen dazu, dass die Eigenschaft ignoriert wird.
- Einzelzeichen (zB
U+26) - Zeichenbereich (zB
U+0025-00FF) - Platzhalterbereich (z. B.
U+4??)
Die Wildcard Range ist die knifflige. Jedes ?stellt einen Platzhalter dar, bei dem ein beliebiger Wert übereinstimmt. Sie würden denken, das bedeutet, dass Sie das Ganze mit so etwas wie einem Wildcard versehen 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 wird jedoch nicht funktionieren. Der Grund dafür ist, dass das Führen mit ?impliziert einen Zeichencode, der mit führt 0, was bedeutet, dass bis zu fünf Fragezeichen verwendet werden können, obwohl Unicodes bis zu sechs Zeichen insgesamt akzeptieren.
@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 Unicode-Optionen. Basic Latin ( 0020-007F) ist wahrscheinlich der häufigste 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
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Weiterführende Literatur
- CSS Fonts Module Level 3 Spezifikation
- Unicode-Tabelle: Eine Ressource zum Verweisen auf Unicode-Zeichensätze und -Codes.
- Verwenden von @ font-face: CSS-Tricks-Beitrag, der beschreibt, wie
@font-facemit verschiedenen Techniken und Arbeitsbeispielen gearbeitet wird. - Was ist mit der Deklaration von Schrifteigenschaften auf @ font-face zu tun?: CSS-Tricks-Beitrag, der sich darauf bezieht, wie übereinstimmende Werte in Schrifteigenschaften verwendet werden können, um zu bestimmen, ob eine benutzerdefinierte Schriftart heruntergeladen und vom Browser verwendet wird.