Des polices de vecteur de couleur compactes et compatibles avec la compression, avec tous vos parfums de dégradé 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 visant à généraliser les polices de couleur en ajoutant des dégradés, en ajoutant des compositions et en combinant des couleurs, et en améliorant la réutilisation interne des formes pour les fichiers de police nets et compacts qui sont bien compressés.
Colorier maintenant
Sur le Web, le texte est généralement dessiné dans une couleur spécifiée en CSS. La police ne définit pas de couleur particulière, elle indique simplement l'emplacement des pixels. C’est généralement
une bonne chose. CSS permet à l'auteur de choisir une couleur de manière flexible. Cependant, un glyphe contient parfois plusieurs couleurs qui ont ensemble une signification. Par exemple, l'indicateur 
avec des rayures bleu clair, roses et blanches n'aura pas la même signification s'il était simplement dessiné dans la couleur de texte actuelle.
Aujourd'hui, pour la plupart des utilisateurs, les emoji sont les seules polices de couleur visibles. Les emoji apparaissent généralement sur le Web via la police d'emoji du système ou en insérant des images (qui a ses propres complications, 
). Les tailles de fichiers volumineuses, en particulier pour les polices de couleurs basées sur bitmap, rendent difficile l'utilisation des polices Web pour les emoji. En prenant en charge COLRv1, nous espérons constater une prolifération de l'utilisation créative des polices de couleur sur le Web et ailleurs.
Montre-moi tes couleurs
Nous avons créé quelques exemples avec lesquels vous pouvez jouer:
Les exemples d'éléments Google Fonts utilisés dans cet exemple sont disponibles dans l'API Web Google Fonts. Elles ne sont pas répertoriées dans le répertoire sur fonts.google.com, car elles ne fonctionnent qu'avec Chrome 98 ou version ultérieure et présentent des travaux expérimentaux.
Vous pouvez désormais créer vos propres polices COLRv1 à l'aide d'outils sans frais et Open Source. Découvrez le compilateur de polices nanoemoji, qui vous permet de créer des polices COLRv1 à partir d'images sources SVG, puis essayez-les dans Chrome 98 ou une version ultérieure. Essayez de créer votre propre touche d'épices Bungee en modifiant les couleurs de dégradé en suivant ces instructions.
Par exemple, vous pouvez modifier la police Bungee Spice pour qu'elle affiche un dégradé bleu et rouge, comme ceci:
Tweetez vos résultats sur @googlefonts 😃 Pourquoi ne pas essayer un dégradé radial ou un dégradé de balayage ?
Nouveau avec COLRv1
Le format de police accepte plusieurs façons de prendre en charge les couleurs, toutes avec des compromis différents, mais aucun d'entre eux n'a jusqu'à présent réussi sur le Web. (Pour en savoir plus sur les compromis, regardez la vidéo de la conférence BlinkOn 15 de Dominik.) Chrome 98 est compatible avec COLRv1, une évolution de COLRv0. Nous espérons que la combinaison de fonctionnalités graphiques et de 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, ainsi que la composition et le mélange, et améliore la réutilisation des formes internes pour créer des fichiers encore plus compacts.
La capacité d'expression de COLRv1 est à peu près équivalente à celle de la version SVG native, avec en plus la composition et la 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 coniques/balayés. COLRv1 vous permet de repositionner et de transformer des éléments de glyphes à l'aide d'un ensemble complet de transformations de traduction, de rotation, de netteté et d'échelle. De plus, il prend en charge les variations 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 tons clairs en forme d'étoile ont la même forme, mais des tailles différentes, ce qui signifie qu'une seule forme peut être repositionnée et réutilisée sans duplication à l'intérieur du 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 décorations florales, où les mêmes formes de fleurs sont placées sur des lettres différentes en référençant simplement les glyphes de couleur existants. Pour le cas d'utilisation de la police Web, COLRv1 se compresse bien sous woff2. Par exemple, un build de test de Twemoji utilisant COLRv1 prend environ 1,2 Mo de taille gonflée, mais il fait environ 0,6 Mo au format woff2. Une version complète de l'ensemble complet de glyphes d'emoji Noto a été réduit de 9 Mo pour la version bitmap à 1,85 Mo au format COLRv1 + woff2.
Cas d'utilisation de polices de couleur
Titres accrocheurs
Une police de couleurs fraîche permet de faire ressortir les points forts visuels, les titres et les bannières.
Plus besoin de remplacer les images: polices emoji
Si vous acceptez les contenus générés par les utilisateurs, ceux-ci utilisent probablement des emoji. Aujourd'hui, il est très courant d'analyser du texte et de remplacer tous les emoji rencontrés par des images pour assurer un rendu cohérent sur plusieurs plates-formes et la compatibilité avec des emoji plus récents que ceux compatibles avec l'OS. Ces images doivent ensuite être remplacées par du texte lors des opérations de presse-papiers. Voici un exemple réel:
Si vous utilisez une police emoji, il vous suffit d'afficher le texte dans la police, comme ceci:
<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 plutôt qu'un catalogue d'éléments image.
Imaginez le nombre d'images qu'il vous faudrait récupérer pour obtenir un sélecteur d'emoji complet !
Couleur des polices d'icône
L'utilisation de la couleur dans les polices d'icônes ajoute de la clarté et rend les glyphes plus faciles à comprendre.
Expression artistique
Les polices de couleur économes en espace permettent l'émergence de nouvelles formes d'expression artistique dans le texte sur le Web. Cet exemple de police arabe de style Kufi utilise des dégradés de couleurs comme interprétation artistique de ce à quoi pourrait ressembler le flux d'encre de la calligraphie traditionnelle appliqué au style koufi de l'écriture arabe, qui n'est pas écrit avec une plume et de l'encre, mais sculpté dans la pierre.
Détection de fonctionnalités
Pour le moment, il est possible de déterminer si un moteur de navigateur accepte un format de police de couleur spécifique en reniflant un user-agent ou en effectuant une recherche dans une bibliothèque telle que ChromaCheck de @PixelAmbacht afin de tester le rendu des glyphes de couleur sur Canvas. Les deux solutions ne sont pas optimales. Les tests de caractéristiques doivent détecter uniquement une fonctionnalité spécifique et éviter le reniflage du user-agent. La bibliothèque ChromaCheck ne devrait pas avoir besoin d'effectuer d'opérations de canevas 2D qui consomment beaucoup de ressources pour déterminer la compatibilité.
Afin de l'améliorer, l'équipe Chrome a lancé une série de discussions [1, 2] au sein du groupe de travail CSS afin de fournir des informations sur la prise en charge de la technologie de police des navigateurs en JavaScript et de manière déclarative dans CSS. L'équipe prévoit de lancer une détection efficace des fonctionnalités pour la police 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 lorsque la prise en charge de COLRv1 est limitée à Chrome, vous pouvez le faire de deux manières: demandez à votre fournisseur de police de vous fournir une police COLRv1 qui contient également des glyphes monochromes. Les user-agents qui ne sont pas compatibles avec COLRv1 utiliseront l'affichage de glyphes monochromes. Vous pouvez également utiliser la bibliothèque ChromaCheck ou le user-agent reniflage 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 user-agents compatibles et utilisez un autre format de police tel que COLRv0, un format de police bitmap ou OpenType SVG dans d'autres navigateurs.
Prise en charge de la palette de polices CSS
Il serait extrêmement utile que l'utilisation d'un jeu de couleurs différent ne nécessite pas une nouvelle police d'écriture. Heureusement, il existe un mécanisme: la propriété CSS font-palette. L'équipe Chrome travaille actuellement à la prise en charge de la palette de polices dans Chrome.
Les polices COLRv1 et vous
Si les polices COLRv1 suscitent votre intérêt, demandez à votre fournisseur de choisir une police de couleurs COLRv1 à utiliser dans votre projet, essayez les exemples et démonstrations ci-dessus, ou pourquoi ne pas vous lancer directement et essayer de créer la vôtre ?
Si vous avez des commentaires sur COLRv1 dans Chrome, publiez un message sur la liste de diffusion blink-dev ou signalez un problème dans notre Issue Tracker. 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 nous réjouissons de la manière dont COLRv1 apporte un tout nouveau niveau de créativité typographique sur le Web.
En savoir plus
Si vous souhaitez en savoir plus, voici quelques ressources supplémentaires:
Pour en savoir plus sur le fonctionnement de COLRv1 et son implémentation dans Chrome, regardez la conférence de Dominik, BlinkOn 15.
- Conférence internationale Unicode n° 45: Vector Color Fonts, discours de Roderick Sheeter, Peter Constable et Dominik Röttsches (vidéo, détails de l'argumentaire)
- compilateur de polices nanoemoji, qui génère des polices COLRv1 à partir d'images SVG.
- Le dépôt GitHub de polices de couleurs de Google Fonts contenant les versions actuelles des emoji Noto et Twemoji, ainsi que d'autres exemples de polices
- Présentation de la police Bradley Initials par DJR
- Outil et bibliothèque ChromaCheck pour détecter les technologies de police de couleur disponibles
Remerciements
Un grand merci à 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 autres pour leurs contributions à COLR1.