La unicode-rangepropriété en CSS est utilisée par le @font-facepour définir les caractères pris en charge par la police.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+00-FF; /* Define the available characters */ )En d'autres termes, @font-facefera référence à la propriété et déterminera si elle doit ou non télécharger et utiliser la police en fonction du fait que les caractères ou la plage de caractères correspondent à ceux du document HTML.
Font Face: Hé HTML, est-ce que l'un des caractères suivants correspond à ce qui est sur la page?
HTML: Oui, plusieurs d'entre eux le font.
Font-Face: Parfait, voici un fichier de police que vous devez télécharger pour afficher ces caractères.
La distinction sémantique importante que nous devons souligner ici est qu'elle unicode-rangedétermine pour quels caractères une police peut être utilisée, plutôt que pour quels caractères une police est disponible. En d'autres termes, si nous déclarons un unicode-rangeon @font-faceet que les caractères chargés dans un document HTML correspondent à cette plage, la police sera téléchargée et utilisée.
Vous pouvez imaginer les avantages de performance qui s'ouvrent avec cette propriété. Par exemple, nous ne pouvons charger une police personnalisée que si elle contient des caractères spécifiques plutôt que de toujours charger la police dans toutes les situations.
Il existe même un moyen de combiner deux @font-faceensembles sur la même font-facedéclaration de propriété, grâce à une astuce pratique partagée par Jake Archibald. L'idée est qu'un @font-faceensemble remplace l'autre en fonction des unicode-rangeperformances correspondantes , en optimisant ou en améliorant simplement la typographie sur une page.
Valeurs
Tout code ou plage de caractères Unicode est une unicode-rangevaleur acceptable . Vous remarquerez que les points Unicode sont précédés d'un U+suivi de six caractères maximum qui composent le code de caractère. Les points ou plages qui ne suivent pas ce format sont considérés comme non valides et entraîneront l'ignorance de la propriété.
- Caractère unique (par exemple
U+26) - Plage de caractères (par exemple
U+0025-00FF) - Plage de caractères génériques (par exemple
U+4??)
La gamme Wildcard est la plus délicate du groupe. Chacun ?représente un caractère générique où n'importe quelle valeur correspondra. Vous penseriez que cela signifie que vous pouvez créer un caractère générique avec quelque chose comme ceci:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Cependant, cela ne fonctionnera pas. La raison en est que le début avec ?implique un code de caractère qui mène avec 0, ce qui signifie que jusqu'à cinq caractères de point d'interrogation peuvent être utilisés même si les Unicodes acceptent jusqu'à six caractères au total.
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )Il existe une tonne d'options Unicode. Le latin de base ( 0020-007F) est probablement la plage la plus courante pour les sites anglais, mais unicode-table.com fournit une liste complète de toutes les plages disponibles avec des codes pour des caractères spécifiques.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | dix |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Lectures complémentaires
- Spécification de niveau 3 du module de polices CSS
- Table Unicode: une ressource pour référencer des jeux de caractères et des codes Unicode.
- Utilisation de @ font-face: article CSS-Tricks expliquant comment
@font-facefonctionne avec différentes techniques et exemples de travail. - Quel est le problème avec la déclaration des propriétés de police sur @ font-face?: Article CSS-Tricks qui est lié à la manière dont les valeurs correspondantes dans les propriétés de police peuvent être utilisées pour déterminer si une police personnalisée est téléchargée et utilisée par le navigateur.