unicode-range

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

Ledescripteur CSSunicode-range pour à larègle @@font-face, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.

Syntaxe

css

/* Valeurs <unicode-range> */unicode-range: U+26; /* un seul point de code */unicode-range: U+0-7F;unicode-range: U+0025-00FF; /* un intervalle spécifique */unicode-range: U+4??; /* un intervalle de substitution */unicode-range: U+0025-00FF, U+4??; /* plusieurs valeurs */

Valeurs

Une valeur de type<unicode-range> peut se présenter de trois façons différentes :

Un seul point de code: Par exempleU+26
Un intervalle spécifique de points de code: Par exempleU+0025-00FF indique que l'intervalle contient tous les caractères contenus entre les points de codeU+0025 etU+00FF
Un intervalle de substitution indiqué par?: Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi,U+4?? signifie « tous les caractères contenus dans l'intervalle entre les points de codeU+400 etU+4FF ».

Description

Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.

Définition formelle

En lien avec lesrègles @	`@font-face`
Valeur initiale	`U+0-10FFFF`
Valeur calculée	comme spécifié

Syntaxe formelle

unicode-range =
<unicode-range-token>#

Exemples

Utiliser une police différente pour un seul caractère

Dans cet exemple, nous créons un élément<div> unique, avec une chaîne de texte qui inclut une esperluette que nous voulons styliser avec une police différente. Pour que cela soit évident, nous utiliserons une police sans empattement,Helvetica, pour le texte, et une police avec empattement,Times New Roman, pour l'esperluette.

Dans le CSS, nous définissons en effet une règle@font-face complètement séparée qui n'inclut qu'un seul caractère, ce qui signifie que seul ce caractère sera stylisé avec cette police. Nous aurions également pu faire cela en enveloppant l'esperluette dans un<span> et en appliquant une police différente uniquement à cela, mais cela aurait ajouté un élément et un ensemble de règles supplémentaires.

HTML

html

<div>Toi & Moi = Nous</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;}