Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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

css
/* <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 von U+0025 bis U+00FF einbeziehen.

Wildcard-Bereich

Ein Bereich von Unicode-Codepunkten, der Wildcard-Zeichen enthält, das heißt unter Verwendung des Zeichens '?', sodass zum Beispiel U+4?? bedeutet, alle Zeichen im Bereich von U+400 bis U+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
AnfangswertU+0-10FFFF
Berechneter Wertwie 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

html
<div>Me & You = Us</div>

CSS

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

Siehe auch