Propriété CSS unicode-range - Utilisation et exemples

Le descripteur unicode-range définit la plage spécifique de caractères qu'une police, spécifiée par la règle at @font-face, est autorisée à fournir. C'est un descripteur, non une propriété autonome : il n'a de sens qu'à l'intérieur d'un bloc @font-face, où il restreint les points de code Unicode pour lesquels ce fichier de police particulier est utilisé.

Le navigateur utilise cette plage comme indication de téléchargement. Si la page n'utilise aucun caractère de la plage, le fichier de police n'est pas téléchargé du tout. Si au moins un caractère de la plage apparaît sur la page, l'intégralité du fichier de police est téléchargée. Cela fait de unicode-range le fondement du sous-ensemble de polices — en servant un petit fichier de police par script (latin, cyrillique, grec, etc.) et en ne récupérant que ceux dont la page a réellement besoin. Lorsque @font-face n'est pas pris en charge, les polices de secours de votre liste font-family sont utilisées à la place.

Avertissement

Les points Unicode sont précédés d'un U+ suivi de six caractères au maximum composant le code du caractère. Les points ou plages qui ne respectent pas ce format sont considérés comme invalides et feront en sorte que la propriété soit ignorée.

Il existe de nombreux blocs Unicode parmi lesquels choisir. Le Latin de base (U+0020-007F) couvre les lettres anglaises standard, les chiffres et la ponctuation, et constitue la plage la plus courante pour les sites en langue anglaise.

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

Syntaxe

Valeurs du descripteur CSS unicode-range

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

Exemple du descripteur unicode-range :

Exemple de code du descripteur CSS unicode-range

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

Essayez vous-même »

Règles @font-face multiples pour le sous-ensemble de polices

Le principal cas d'utilisation 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 :

@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 ne télécharge que le sous-ensemble contenant les caractères utilisés sur la page. Notez que chaque sous-ensemble partage le même nom font-family — c'est ce qui permet au navigateur de les traiter comme une seule police logique répartie sur plusieurs fichiers.

Plages avec caractères génériques

Le caractère générique ? représente n'importe quel chiffre hexadécimal, ce qui constitue une façon compacte d'exprimer un bloc entier. Ces trois déclarations sont équivalentes :

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

Vous pouvez également lister plusieurs plages, séparées par des virgules :

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

Compatibilité des navigateurs

unicode-range est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari et Edge). Comme il n'affecte que quel fichier de police est téléchargé, les navigateurs qui ne le reconnaissent pas téléchargent simplement la police normalement — il se dégrade donc avec élégance et peut être utilisé partout en toute sécurité.

Valeurs

Valeur	Description
single codepoint	Un point de code Unicode représenté sous la forme d'un à six chiffres hexadécimaux.
codepoint range	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.
wildcard range	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 exemple, `U+00??`).
initial	Définit la propriété à 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 depuis une police définie par

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