Propriété CSS unicode-range

Le descripteur unicode-range définit la plage spécifique de caractères qui sont utilisés avec les polices spécifiées par la règle @font-face pour une utilisation sur la page. Lorsque @font-face n'est pas pris en charge, une police de secours doit être incluse.

Si la page n'utilise pas de caractère dans la plage, la police n'est pas téléchargée. Si au moins un caractère est utilisé, toute la police est téléchargée.

WARNING

Les points Unicode sont précédés de U+ suivi d'un maximum de six caractères qui composent le code du caractère. Les points ou plages qui n'ont pas ce format sont considérés comme invalides et entraîneront l'ignorance de la propriété.

Il existe de nombreuses options Unicode à utiliser. Le latin de base (0020—007F) est la plage la plus courante pour les sites en anglais.

Valeur initiale	U+0-10FFFF
S'applique à	Le bloc `@font-face` dans lequel la propriété est incluse.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.unicodeRange = "U+0025-00FF";

Syntaxe

Valeurs du descripteur CSS unicode-range

css

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

Exemple du descripteur unicode-range :

Exemple de code du descripteur CSS unicode-range

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 »

Multiples règles `@font-face` pour le sous-ensemble de polices

Le cas d'utilisation principal de unicode-range consiste à diviser une police en sous-ensembles afin de réduire la taille du téléchargement. Chaque sous-ensemble définit une plage de caractères spécifique :

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 */
}

Le navigateur télécharge uniquement le sous-ensemble qui contient les caractères utilisés sur la page.

Valeurs

Valeur	Description
point de code unique	Un point de code de caractère Unicode représenté sous la forme d'un à six chiffres hexadécimaux.
plage de points de code	Une plage de points de code Unicode représentée sous la forme de deux points de code Unicode séparés par un tiret. Elle spécifie le début et la fin d'une plage.
plage générique	Une plage de points de code Unicode contenant des caractères génériques, utilisant le caractère `?` pour indiquer n'importe quel chiffre hexadécimal (par ex., `U+00??`).
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Le descripteur CSS unicode-range définit la plage spécifique de caractères à utiliser à partir d'une police définie par

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

Propriété CSS unicode-range ​

Syntaxe ​

Exemple du descripteur unicode-range : ​

Multiples règles @font-face pour le sous-ensemble de polices ​