Des polices vectorielles de couleurs compactes et compatibles avec la compression avec toutes vos de différents types de gradients.
Dans Chrome 98, les équipes Chrome et Fonts ont ajouté la prise en charge de COLRv1, un évolution du format de police COLRv0 visant à généraliser les polices de couleur ajout de dégradés, composition et mélanges, et amélioration de la réutilisation des formes internes pour obtenir des fichiers de polices net et compacts, avec une bonne compression.
Colorer maintenant
Sur le Web, le texte est généralement affiché dans une couleur spécifiée en CSS. La police fait
ne pas définir une couleur particulière, il indique simplement où les pixels doivent être
n'est pas placé. C'est généralement
une bonne chose. Le CSS permet à l'auteur de choisir
couleur. Cependant, parfois un glyphe contient plusieurs couleurs qui ont ensemble
sens. Par exemple, cet indicateur 
avec des rayures bleu clair, roses et blanches ne correspondrait pas
transmettre la même signification s'il était simplement dessiné dans la couleur actuelle du texte.
Aujourd'hui, pour la plupart des utilisateurs, les emoji sont les seules polices de couleur qu'ils voient. Emoji
apparaissent généralement sur le Web avec la police emoji du système ou en insérant des images
(qui comporte ses propres complications, 
). Fichier volumineux
en particulier pour les polices de couleur bitmap, a rendu difficile l'utilisation
des polices pour les emoji. En adoptant COLRv1, nous espérons constater une prolifération
utilisation des polices de couleurs des créations sur le Web et au-delà.
Montre-moi vos couleurs
Nous avons créé quelques exemples à tester:
Les éléments Google Fonts utilisés dans cet exemple sont disponibles dans API Web Google Fonts : Il s'agit ne figurant pas dans l'annuaire à l'adresse fonts.google.com en tant que elles ne fonctionnent que sur 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. Chèque le compilateur de polices nanoemoji qui vous permet de créer des polices COLRv1 à partir d'images sources SVG, puis de les tester dans Chrome 98 ou version ultérieure Essayez de créer votre propre version de Bungee Spice en changeant la des couleurs dégradées à l'aide ces instructions.
Par exemple, vous pouvez modifier la police Bungee Spice pour avoir un dégradé bleu et rouge, comme ceci:
Envoyez vos résultats sur tweet à @googlefonts 😃 Pourquoi ne pas essayer un dégradé radial ou "Balayage" ?
Nouveau avec COLRv1
Le format de police prend en charge plusieurs façons de prendre en charge des couleurs, chacune avec différentes des compromis, mais aucun n'a encore été couronné de succès sur le Web. (Pour en savoir plus sur les compromis, Regardez la conférence BlinkOn 15 de Dominik. Chrome 98 est compatible avec COLRv1, une évolution de COLRv0. Nous espérons que La combinaison de capacités graphiques et de fichiers compacts de COLRv1 en fait une est un bon choix pour de nombreux cas d'utilisation de polices de couleur. COLRv1 ajoute des dégradés, composition et mélange, et améliore réutilisation des formes internes pour créer des fichiers encore plus compacts.
La capacité expressive de COLRv1 est à peu près équivalente à SVG natif plus composition et composition ajoutées en haut. Il existe quatre types de remplissage de couleur: couleurs unies, dégradés linéaires, remplissages radiaux les dégradés, et les balayages/gradients coniques. COLRv1 vous permet de repositionner et transformer éléments de glyphes à l'aide d'un ensemble complet d'options de déplacement, de rotation, de sensibilisation et de mise à l'échelle Transformer. De plus, il est compatible avec les variantes et réutilisations de polices 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 sont ont la même forme, mais sont de tailles différentes, ce qui signifie qu'une seule forme peut être repositionné et réutilisé sans dupliquer dans le fichier. Ce format permet de réutiliser un glyphe complet dans un nouveau glyphe, sans avoir à le faire de façon redondante encoder les mêmes formes pour chaque glyphe. Imaginez une police de couleurs décoratives avec des décorations florales, où les mêmes formes de fleurs sont placées sur différentes lettres en référençant simplement les glyphes de couleur existants. Pour le cas d'utilisation des polices Web, COLRv1 se compresse bien sous woff2. Par exemple, un build de test de Twemoji utilisant COLRv1 prend environ 1,2 Mo gonflé, mais est d'environ 0,6 Mo sous forme woff2. Un build du La taille complète de l'ensemble Noto Emoji Glyphs a été réduite de 9 Mo pour la version bitmap à 1,85 Mo. au format COLRv1+woff2.
<ph type="x-smartling-placeholder">
Cas d'utilisation des polices de couleur
Titres accrocheurs
Une nouvelle police de couleur met en valeur les éléments visuels, les titres et les bannières s'affiche.
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 de parcourir du texte et de remplacer les emoji détectés par des images pour assurer un affichage multiplate-forme cohérent et la compatibilité d'emoji que le système d'exploitation ne le prend pas en charge. Ces images doivent ensuite être remplacées par du texte pendant les opérations du presse-papiers. Voici un exemple réel:
<ph type="x-smartling-placeholder">
Si vous utilisez une police emoji, affichez simplement 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 au lieu d'un catalogue de composants image.
Imaginez le nombre d'images qu'il vous faudrait extraire pour un sélecteur d'emoji complet.
Couleur des polices d'icône
L’utilisation de couleur dans les polices d’icône ajoute de la clarté et facilite la compréhension des glyphes.
Expression artistique
Des polices colorées, économes en espace offrent 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 du flux d'encre de la calligraphie traditionnelle pour le style kufi de l'écriture arabe, qui commence d'être gravés dans la pierre plutôt que d'être écrits à la plume et à l'encre.
Détection de caractéristiques
À l’heure actuelle, le fait de déterminer si un moteur de navigateur prend en charge une couleur spécifique format de police est possible par reniflage par le user-agent ou par une recherche bibliothèque comme ChromaCheck @PixelAmbacht pour tester le rendu des couleurs de glyphes sur Canvas. Les deux solutions ne sont pas optimales. Le test de fonctionnalité doit détecter qu'une fonction spécifique elle-même et d'éviter le reniflage du user-agent. ChromaCheck la bibliothèque de données n'a pas besoin d'effectuer d'opérations de canevas 2D gourmandes en ressources pour déterminer le soutien.
L'équipe Chrome souhaite améliorer cela et a lancé une série de discussions [1, 2] du groupe de travail CSS pour fournir des informations sur la compatibilité de la technologie des polices de navigateur en JavaScript et de manière déclarative dans CSS. L'équipe prévoit de lancer une détection efficace des caractéristiques pour 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 lorsque COLRv1 est limitée à Chrome, vous pouvez le faire de deux façons : fournisseur pour une police COLRv1 qui contient également des glyphes monochromes. Les user-agents qui non compatibles COLRv1 reviendra au rendu monochrome glyphes. Vous pouvez également utiliser la bibliothèque ou le user-agent ChromaCheck pour déterminer si la prise en charge de COLRv1 est disponible. Ensuite, diffusez des fichiers CSS qui charge les polices COLRv1 dans les user-agents compatibles et utilise une autre police tel que COLRv0, un format de police bitmap ou SVG OpenType dans d'autres navigateurs.
Compatibilité avec les palettes de polices CSS
Ce serait extrêmement utile si l'utilisation d'un jeu de couleurs différent ne nécessitent une nouvelle police. Heureusement, il existe un mécanisme : propriété CSS font-palette. La L'équipe Chrome s'efforce d'ajouter Prise en charge de font-palette dans Chrome.
Polices COLRv1 et vous
Si les polices COLRv1 suscitent votre intérêt, renseignez-vous sur une couleur COLRv1 auprès de votre fournisseur de polices. à utiliser dans votre projet, consultez les exemples et démonstrations ci-dessus, ou pourquoi ne pas vous lancer et expérimenter créer le vôtre ?
Si vous avez des commentaires sur COLRv1 dans Chrome, publiez-les sur le liste de diffusion blink-dev, ou signaler 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 au niveau Dépôt GitHub de spécification CORv1.
Avec Chrome 98, nous sommes ravis de la façon dont COLRv1 apporte une tout nouvelle la créativité typographique sur le Web.
En savoir plus
Si vous souhaitez obtenir plus d'informations, voici quelques ressources supplémentaires qui peuvent vous être utiles:
Pour en savoir plus sur le fonctionnement de COLRv1 et sur son implémentation dans Chrome, regardez la conférence BlinkOn 15 de Dominik.
- Conférence internationale Unicode n° 45: polices de couleurs vectorielles, par Roderick Sheeter, Peter Constable et Dominik Röttsches (vidéo, détails de l'appel)
- compilateur de polices nanoemoji, produisant Polices COLRv1 provenant d'images SVG
- Google Fonts Dépôt GitHub color-fonts contenant les versions actuelles d'emoji Noto et Twemoji, ainsi que d'autres exemples de polices
- Présentation de la police Bradley Initials par DJR, explorant COLRv1
- l'outil et la bibliothèque ChromaCheck pour les technologies de police 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 d'autres personnes pour leurs contributions à COLRv1.