Polices vectorielles compactes, faciles à compresser et colorées, avec tous vos dégradés préférés.
Dans Chrome 98, les équipes Chrome et Fonts ont ajouté la prise en charge de COLRv1, une évolution du format de police COLRv0 destinée à généraliser les polices de couleur en ajoutant des dégradés, la composition et le mélange, ainsi qu'une réutilisation améliorée des formes internes pour des fichiers de police nets et compacts qui se compressent bien.
Colorer maintenant
Sur le Web, le texte est généralement dessiné dans une couleur spécifiée en CSS. La police ne définit aucune couleur particulière, elle indique simplement où les pixels doivent être placés. C'est généralement une bonne chose. Le CSS permet à l'auteur de choisir une couleur de manière flexible. Toutefois, il arrive qu'un glyphe contienne plusieurs couleurs qui, ensemble, ont une signification. Par exemple, ce drapeau 
avec des rayures bleu clair, roses et blanches n'aurait pas la même signification s'il était simplement dessiné dans la couleur du texte actuel.
Aujourd'hui, la plupart des utilisateurs ne voient que des emoji en tant que polices de couleur. Les emoji apparaissent généralement sur le Web via la police d'emoji du système ou en insérant des images (ce qui présente ses propres complications, 
). Les grandes tailles de fichiers, en particulier pour les polices de couleur bitmap, ont rendu difficile l'utilisation de polices Web pour les emoji. En prenant en charge COLRv1, nous espérons voir une prolifération de l'utilisation créative des polices de couleur sur le Web et au-delà.
Vous pouvez désormais créer vos propres polices COLRv1 à l'aide d'outils Open Source sans frais. Consultez le compilateur de police nanoemoji, qui vous permet de créer des polices COLRv1 à partir d'images sources SVG, puis essayez-les dans Chrome 98 ou version ultérieure. Essayez de créer votre propre version de Bungee Spice en modifiant les couleurs du dégradé à l'aide de ces instructions.
Par exemple, vous pouvez modifier la police Bungee Spice pour qu'elle présente un dégradé bleu et rouge, comme ceci :
Tweetez vos résultats à @googlefonts 🙂 Pourquoi ne pas essayer un dégradé radial ou en balayage ?
Nouveautés de COLRv1
Le format de police prend en charge plusieurs façons de gérer les couleurs, chacune avec ses propres compromis, mais aucune n'a encore réussi sur le Web. (Pour en savoir plus sur les compromis, consultez la conférence de Dominik à BlinkOn 15.) Chrome 98 est compatible avec COLRv1, une évolution de COLRv0. Nous espérons que la combinaison des capacités graphiques et des fichiers compacts de COLRv1 en fera un bon choix pour de nombreux cas d'utilisation de polices de couleur. COLRv1 ajoute des dégradés, des composés et des mélanges, et améliore la réutilisation des formes internes pour créer des fichiers encore plus compacts.
COLRv1 offre une expressivité à peu près équivalente à SVG Native, avec en plus des fonctionnalités de fusion et de composition. Il existe quatre types de remplissages de couleur : les couleurs unies, les dégradés linéaires, les dégradés radiaux et les dégradés de balayage/coniques. COLRv1 vous permet de repositionner et de transformer les éléments de glyphe à l'aide d'un ensemble complet de transformations de translation, de rotation, de cisaillement et de mise à l'échelle. De plus, il est compatible avec les variantes de police et réutilise les formats de définition de forme existants dans la police.
Prenons l'exemple de l'emoji boule de cristal : les reflets en forme d'étoile ont la même forme, mais des tailles différentes. Cela signifie qu'une seule forme peut être repositionnée et réutilisée sans duplication dans le fichier. Ce format vous permet de réutiliser un glyphe complet dans un nouveau glyphe, sans avoir à encoder de manière redondante les mêmes formes pour chaque glyphe. Imaginez une police de couleur décorative avec des motifs floraux, où les mêmes formes de fleurs sont placées sur différentes lettres en faisant simplement référence aux glyphes de couleur existants. Pour le cas d'utilisation des polices Web, COLRv1 se compresse bien sous woff2. Par exemple, une version test de Twemoji utilisant COLRv1 prend environ 1,2 Mo une fois décompressée, mais environ 0,6 Mo au format WOFF2. Une compilation de l'ensemble complet de glyphes Noto Emoji est passée de 9 Mo pour la version bitmap à 1,85 Mo au format COLRv1+woff2.
Cas d'utilisation des polices de couleur
Plus de remplacement d'images : polices d'emoji
Si vous acceptez les contenus générés par les utilisateurs, vos utilisateurs utilisent probablement des emoji. Aujourd'hui, il est très courant d'analyser du texte et de remplacer les emoji rencontrés par des images pour assurer un rendu cohérent sur toutes les plates-formes et pouvoir prendre en charge des emoji plus récents que ceux pris en charge par l'OS. Ces images doivent ensuite être reconverties en texte lors des opérations du presse-papiers. Voici un exemple concret :
Si vous disposez d'une police d'emoji, il vous suffit d'afficher le texte dans la police, comme suit :
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
De même, dans un composant de réaction emoji, COLRv1 permet d'utiliser un fichier de police compact au lieu d'un catalogue de composants d'image.
Imaginez le nombre d'images que vous devriez récupérer pour un sélecteur d'emoji complet !
Couleur dans les polices d'icônes
L'utilisation de couleurs dans les polices d'icônes ajoute de la clarté et facilite la compréhension des glyphes.
Expression artistique
Les polices de couleur peu gourmandes en espace permettent de nouvelles formes d'expression artistique dans le texte sur le Web. Cet exemple de police arabe de style Koufi utilise des dégradés de couleurs comme interprétation artistique de ce à quoi pourrait ressembler le flux d'encre de la calligraphie traditionnelle lorsqu'il est appliqué au style Koufi de l'écriture arabe, qui provient du fait qu'il n'est pas écrit à la plume et à l'encre, mais gravé dans la pierre.
Détection de caractéristiques
Pour le moment, il est possible de déterminer si un moteur de navigateur est compatible avec un format de police couleur spécifique en détectant l'user-agent ou en effectuant une recherche dans une bibliothèque telle que ChromaCheck de @PixelAmbacht pour tester le rendu des glyphes de couleur sur Canvas. Aucune de ces solutions n'est optimale. Les tests de fonctionnalités ne doivent détecter qu'une fonctionnalité spécifique et éviter l'analyse de l'agent utilisateur. La bibliothèque ChromaCheck ne devrait pas avoir besoin d'effectuer des opérations de canevas 2D gourmandes en ressources pour déterminer la compatibilité.
L'équipe Chrome souhaite améliorer cette situation et a entamé une série de discussions [1, 2] au sein du groupe de travail CSS pour fournir des informations sur la compatibilité de la technologie de police du navigateur en JavaScript et de manière déclarative en CSS. L'équipe prévoit de publier une détection efficace des fonctionnalités pour les polices de couleur et d'autres technologies de police dans une future version de Chrome.
Si vous souhaitez utiliser des polices de couleur dans votre projet dès maintenant, alors que la prise en charge de COLRv1 est limitée à Chrome, vous avez deux possibilités : demandez à votre fournisseur de polices une police COLRv1 qui contient également des glyphes monochromes. Les user-agents qui ne sont pas compatibles avec COLRv1 afficheront des glyphes monochromes. Vous pouvez également utiliser la bibliothèque ChromaCheck ou l'analyse de l'agent utilisateur pour déterminer si la prise en charge de COLRv1 est disponible. Vous fournissez ensuite du code CSS qui charge les polices COLRv1 dans les agents utilisateurs compatibles et utilisez un autre format de police, tel que COLRv0, un format de police bitmap ou OpenType SVG dans les autres navigateurs.
Compatibilité avec la propriété CSS font-palette
Il serait extrêmement utile de ne pas avoir à utiliser une nouvelle police pour utiliser un autre ensemble de couleurs. Heureusement, un mécanisme existe : la propriété CSS font-palette. L'équipe Chrome travaille à l'ajout de la compatibilité avec les palettes de typographie dans Chrome.
Les polices COLRv1 et vous
Si les polices COLRv1 vous intéressent, demandez à votre fournisseur de polices une police de couleur COLRv1 à utiliser dans votre projet, essayez les exemples et les démonstrations ci-dessus, ou pourquoi ne pas vous lancer et essayer de créer votre propre police ?
Si vous avez des commentaires sur COLRv1 dans Chrome, publiez-les sur la liste de diffusion blink-dev ou signalez un problème dans notre outil de suivi des problèmes. Si vous avez des commentaires sur le format de police COLRv1 lui-même, signalez un problème dans le dépôt GitHub de la spécification COLRv1.
Avec Chrome 98, nous sommes ravis de voir comment COLRv1 apporte un tout nouveau niveau de créativité typographique au Web.
En savoir plus
Si vous souhaitez en savoir plus, voici quelques ressources supplémentaires :
Pour découvrir comment fonctionne COLRv1 et comment il est implémenté dans Chrome, consultez la conférence BlinkOn 15 de Dominik.
- International Unicode Conference #45 : Vector Color Fonts, conférence de Roderick Sheeter, Peter Constable et Dominik Röttsches (vidéo, détails de la conférence)
- nanoemoji font compiler, qui produit des polices COLRv1 à partir d'images SVG
- Le dépôt GitHub color-fonts de Google Fonts contenant les versions actuelles de Noto Emoji, Twemoji et d'autres exemples de polices
- Présentation de la police Bradley Initials par DJR, explorant COLRv1
- Outil et bibliothèque ChromaCheck pour détecter les technologies de polices couleur disponibles
Remerciements
Merci beaucoup à Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens et d'autres pour leurs contributions à COLRv1.