CSS unicode-range Eigenschaft - Verwendung, Beispiele

Der unicode-range-Deskriptor definiert den spezifischen Zeichenbereich, den eine Schrift, die durch die @font-face-At-Regel angegeben wird, bereitstellen darf. Es handelt sich um einen Deskriptor, nicht um eine eigenständige Eigenschaft: Er hat nur innerhalb eines @font-face-Blocks Bedeutung, wo er einschränkt, für welche Unicode-Codepunkte diese bestimmte Schriftdatei verwendet wird.

Der Browser nutzt diesen Bereich als Download-Hinweis. Wenn die Seite kein Zeichen aus dem Bereich verwendet, wird die Schriftdatei überhaupt nicht heruntergeladen. Wenn mindestens ein Zeichen aus dem Bereich auf der Seite vorkommt, wird die gesamte Schriftdatei heruntergeladen. Dadurch ist unicode-range die Grundlage für die Schrift-Subsetting-Technik — eine kleine Schriftdatei pro Schriftsystem (Latein, Kyrillisch, Griechisch usw.) wird bereitgestellt und nur diejenigen werden abgerufen, die die Seite tatsächlich benötigt. Wenn @font-face nicht unterstützt wird, werden stattdessen die Fallback-Schriften in Ihrer font-family-Liste verwendet.

Warnung

Unicode-Punkte werden durch ein U+ gefolgt von bis zu sechs Zeichen angegeben, die den Zeichencode bilden. Punkte oder Bereiche, die dieses Format nicht haben, gelten als ungültig und führen dazu, dass die Eigenschaft ignoriert wird.

Es gibt viele Unicode-Blöcke zur Auswahl. Basic Latin (U+0020-007F) umfasst die standardmäßigen englischen Buchstaben, Ziffern und Satzzeichen und ist der häufigste Bereich für englischsprachige Websites.

Standardwert	U+0-10FFFF
Gilt für	Den @font-face-Block, in dem die Eigenschaft enthalten ist.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.unicodeRange = "U+0025-00FF";

Syntax

CSS unicode-range Deskriptor-Werte

unicode-range: single codepoint | codepoint range | wildcard range | initial | inherit;

Beispiel des unicode-range-Deskriptors:

CSS unicode-range Deskriptor-Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'MyFont'; /* Define the custom font name */
        src: url('myfont.woff2') format('woff2'), 
             url('myfont.woff') format('woff'); /* Define the font source */
        unicode-range: U+00-FF; /* Define the available characters */
      }
      div {
        font-size: 3em;
        font-family: MyFont, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-range descriptor example</h2>
    <div>Mary & Jack are friends.</div>
  </body>
</html>

Probier es selbst »

Mehrere @font-face-Regeln für Schrift-Subsetting

Der primäre Anwendungsfall für unicode-range ist das Aufteilen einer Schrift in Teilmengen, um die Download-Größe zu reduzieren. Jede Teilmenge definiert einen spezifischen Zeichenbereich:

@font-face {
  font-family: 'MyFont';
  src: url('myfont-latin.woff2') format('woff2');
  unicode-range: U+00-FF; /* Basic Latin */
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF; /* Cyrillic */
}

Der Browser lädt nur die Teilmenge herunter, die die auf der Seite verwendeten Zeichen enthält. Beachten Sie, dass jede Teilmenge denselben font-family-Namen teilt — das ermöglicht es dem Browser, sie als eine logische Schrift zu behandeln, die auf mehrere Dateien aufgeteilt ist.

Wildcard-Bereiche

Das ?-Wildcard steht für eine beliebige einzelne hexadezimale Ziffer und ist eine kompakte Möglichkeit, einen ganzen Block auszudrücken. Diese drei Deklarationen sind gleichwertig:

unicode-range: U+0000-00FF; /* explicit range */
unicode-range: U+00??;      /* wildcard: U+0000 to U+00FF */
unicode-range: U+0-FF;      /* leading zeros are optional */

Sie können auch mehrere Bereiche auflisten, getrennt durch Kommas:

/* Basic Latin + Latin-1 Supplement + the euro sign */
unicode-range: U+0000-00FF, U+0131, U+20AC;

Browser-Unterstützung

unicode-range wird in allen modernen Browsern unterstützt (Chrome, Firefox, Safari und Edge). Da es nur beeinflusst, welche Schriftdatei heruntergeladen wird, laden Browser, die es nicht kennen, die Schrift einfach wie gewohnt herunter — es degradiert also elegant und kann überall sicher verwendet werden.

Werte

Wert	Beschreibung
single codepoint	Ein Unicode-Zeichencodepunkt, der in Form von ein bis sechs hexadezimalen Ziffern dargestellt wird.
codepoint range	Ein Bereich von Unicode-Codepunkten, der in Form von zwei durch Bindestrich getrennten Unicode-Codepunkten dargestellt wird. Er gibt den Anfang und das Ende eines Bereichs an.
wildcard range	Ein Bereich von Unicode-Codepunkten, der Wildcard-Zeichen enthält, wobei das `?`-Zeichen eine beliebige hexadezimale Ziffer angibt (z. B. `U+00??`).
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Der CSS-Deskriptor unicode-range legt den spezifischen Zeichenbereich fest, der aus einer Schrift verwendet werden soll, die durch folgenden Block definiert wird:

@font-family@font-face@font-weight