unicode-range
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der CSS-Deskriptor unicode-range
setzt den spezifischen Bereich von Zeichen, die aus einer mit der @font-face-Regel definierten Schriftart verwendet werden sollen, und für die aktuelle Seite verfügbar gemacht werden. Wenn die Seite kein Zeichen in diesem Bereich verwendet, wird die Schriftart nicht heruntergeladen; wenn mindestens ein Zeichen verwendet wird, wird die gesamte Schriftart heruntergeladen.
Syntax
/* <unicode-range> values */
unicode-range: U+26; /* single code point */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* code point range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */
Werte
- einzelner Codepunkt
-
Ein einzelner Unicode-Zeichen-Codepunkt, zum Beispiel
U+26
. - Codepunkt-Bereich
-
Ein Bereich von Unicode-Codepunkten. Zum Beispiel bedeutet
U+0025-00FF
alle Zeichen im Bereich vonU+0025
bisU+00FF
einbeziehen. - Wildcard-Bereich
-
Ein Bereich von Unicode-Codepunkten, der Wildcard-Zeichen enthält, das heißt unter Verwendung des Zeichens
'?'
, sodass zum BeispielU+4??
bedeutet, alle Zeichen im Bereich vonU+400
bisU+4FF
einbeziehen.
Beschreibung
Das Ziel dieses Deskriptors ist es, die Schriftsatz-Ressourcen so zu segmentieren, dass ein Browser nur die notwendigen Schriftressourcen für den Textinhalt einer bestimmten Seite herunterladen muss. Beispielsweise könnte eine Website mit vielen Lokalisierungen separate Schriftsatz-Ressourcen für Englisch, Griechisch und Japanisch bereitstellen. Für Benutzer, die die englische Version einer Seite anzeigen, müssten die Schriftsatz-Ressourcen für griechische und japanische Schriften nicht heruntergeladen werden, was Bandbreite spart.
Formale Definition
Zugehörige @-Regel | @font-face |
---|---|
Anfangswert | U+0-10FFFF |
Berechneter Wert | wie angegeben |
Formale Syntax
unicode-range =
<unicode-range-token>#
Beispiele
>Eine andere Schriftart für ein einzelnes Zeichen verwenden
In diesem Beispiel erstellen wir ein einzelnes <div>
-Element, mit einem Textstring, der ein kaufmännisches Und (&) enthält, das wir mit einer anderen Schriftart gestalten möchten. Um es offensichtlich zu machen, verwenden wir eine serifenlose Schriftart, Helvetica, für den Text, und eine Serifenschrift, Times New Roman, für das kaufmännische Und.
Im CSS definieren wir im Grunde eine völlig separate @font-face, die nur ein einzelnes Zeichen enthält, was bedeutet, dass nur dieses Zeichen mit dieser Schrift gestaltet wird. Wir hätten dies auch tun können, indem wir das kaufmännische Und in ein <span>
-Element einwickeln und nur dafür eine andere Schriftart anwenden, aber das wäre ein zusätzliches Element und eine zusätzliche Regel.
HTML
<div>Me & You = Us</div>
CSS
@font-face {
font-family: "Ampersand";
src: local("Times New Roman");
unicode-range: U+26;
}
div {
font-size: 4em;
font-family: "Ampersand", "Helvetica", sans-serif;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4> # unicode-range-desc> |
Browser-Kompatibilität
Loading…