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 unicode-range CSS-Deskriptor legt den spezifischen Bereich von Zeichen fest, der aus einer mit der @font-face-Regel definierten Schriftart verwendet werden soll und für die aktuelle Seite verfügbar gemacht wird. Wenn auf der Seite kein Zeichen in diesem Bereich verwendet wird, wird die Schriftart nicht heruntergeladen; wird mindestens eines verwendet, 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.
Codepunktbereich: Ein Bereich von Unicode-Codepunkten. U+0025-00FF bedeutet zum Beispiel alle Zeichen im Bereich von U+0025 bis U+00FF einschließen.
Wildcard-Bereich: Ein Bereich von Unicode-Codepunkten, der Wildcards enthält, das heißt, der das '?'-Zeichen verwendet, sodass U+4?? zum Beispiel bedeutet, alle Zeichen im Bereich von U+400 bis U+4FF einschließen.

Beschreibung

Der Zweck dieses Deskriptors ist es, die Schriftressourcen so zu segmentieren, dass ein Browser nur die Schriftressource herunterladen muss, die für den Textinhalt einer bestimmten Seite benötigt wird. Ein Beispiel wäre eine Website mit vielen Lokalisierungen, die separate Schriftressourcen für Englisch, Griechisch und Japanisch bereitstellen könnte. Für Benutzer, die die englische Version einer Seite anzeigen, müssten die Schriftressourcen für die griechischen und japanischen 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

Verwendung einer anderen Schriftart für ein einzelnes Zeichen

In diesem Beispiel erstellen wir ein einzelnes <div>-Element mit einer Textzeichenfolge, die ein Et-Zeichen enthält, das wir mit einer anderen Schriftart gestalten möchten. Um es offensichtlich zu machen, verwenden wir eine serifenlose Schrift, Helvetica, für den Text und eine Serifenschrift, Times New Roman, für das Et-Zeichen.

Im CSS definieren wir tatsächlich ein völlig separates @font-face, das nur ein einzelnes Zeichen enthält, was bedeutet, dass nur dieses Zeichen mit dieser Schriftart gestaltet wird. Wir hätten dies auch erreichen können, indem wir das Et-Zeichen in ein <span> einwickeln und nur dort eine andere Schriftart anwenden, aber das wäre ein zusätzliches Element und Regelset.

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden