CSS unicode-range-Eigenschaft

Der unicode-range-Deskriptor definiert den spezifischen Bereich von Zeichen, der mit Schriftarten verwendet wird, die durch die @font-face-Anweisung für die Verwendung auf der Seite festgelegt sind. Wenn @font-face nicht unterstützt wird, sollte eine Fallback-Schriftart angegeben werden.

Wenn die Seite kein Zeichen aus dem Bereich verwendet, wird die Schriftart nicht heruntergeladen. Wenn mindestens ein Zeichen verwendet wird, wird die gesamte Schriftart heruntergeladen.

WARNING

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

Es gibt viele Unicode-Optionen zur Auswahl. Basic Latin (0020–007F) ist der häufigste Bereich für englische Websites.

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

Syntax

CSS unicode-range-Deskriptorwerte

css

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

Beispiel für den unicode-range-Deskriptor:

CSS unicode-range-Deskriptor-Codebeispiel

html

<!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>

Try it Yourself »

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

Der Hauptanwendungsfall für unicode-range ist das Aufteilen einer Schriftart in Teilmengen, um die Download-Größe zu reduzieren. Jede Teilmenge definiert einen bestimmten Zeichenbereich:

css

@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.

Werte

Wert	Beschreibung
einzelner Codepoint	Ein Unicode-Zeichencodepoint, der in Form von ein bis sechs hexadezimalen Ziffern dargestellt wird.
Codepoint-Bereich	Ein Bereich von Unicode-Codepoints, der in Form von zwei Bindestrich-getrennten Unicode-Codepoints dargestellt wird. Er gibt den Start und das Ende eines Bereichs an.
Wildcard-Bereich	Ein Bereich von Unicode-Codepoints, der Wildcard-Zeichen enthält, wobei das `?`-Zeichen für eine beliebige hexadezimale Ziffer steht (z. B. `U+00??`).
initial	Legt die Eigenschaft auf ihren Standardwert fest.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Practice

Der CSS-Deskriptor unicode-range legt den spezifischen Bereich von Zeichen fest, die aus einer von

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

CSS unicode-range-Eigenschaft ​

Syntax ​

Beispiel für den unicode-range-Deskriptor: ​

Mehrere @font-face-Regeln für Font-Subsetting ​