unicode-range
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
Le descripteur CSS unicode-range pour à la rè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
/* 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 exemple
U+26 - Un intervalle spécifique de points de code
-
Par exemple
U+0025-00FFindique que l'intervalle contient tous les caractères contenus entre les points de codeU+0025etU+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+400etU+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 les rè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
<div>Toi & Moi = Nous</div>
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;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # unicode-range-desc |
Compatibilité des navigateurs
Loading…