Fontes vetoriais compactas e compatíveis com compactação e com todas as suas variações de gradiente favoritas.
No Chrome 98, as equipes do Chrome e do Fonts ofereceram suporte ao COLRv1, uma evolução do formato de fonte COLRv0 destinada a tornar as fontes de cores generalizadas com a adição de gradientes, da composição e da mescla, e melhoria da reutilização de formas internas para arquivos de fonte compactos e nítidos que são compactados.
Colorir agora
Na Web, o texto geralmente é desenhado em uma cor especificada no CSS. A fonte não
define nenhuma cor específica, apenas indica onde os pixels precisam ser
colocados. Isso geralmente é bom. O CSS permite que o autor escolha uma
cor com flexibilidade. No entanto, às vezes um glifo contém várias cores que, juntas, têm significado. Por exemplo, a flag 
com listras azul-clara, rosa e branca não
transmitiria o mesmo significado se fosse simplesmente desenhada na cor de texto atual.
Atualmente, os emojis são as únicas fontes coloridas que aparecem para a maioria dos usuários. Os emojis
geralmente aparecem na Web usando a fonte de emojis do sistema ou inserindo imagens
(que tem as próprias complicações, 
). Arquivos grandes,
principalmente para fontes coloridas baseadas em bitmap, dificultaram o uso de fontes da Web
para emojis. Ao oferecer suporte ao COLRv1, esperamos ver uma proliferação
do uso de fontes de cores criativas na Web e além.
Me mostre suas cores
Criamos alguns exemplos para você usar:
Os recursos de exemplo do Google Fonts usados no exemplo estão ativos na API Google Fonts Web. Eles não estão listados no diretório em fonts.google.com porque funcionam apenas no Chrome 98 ou posterior e exibem trabalhos experimentais.
Agora você pode criar suas próprias fontes COLRv1 usando ferramentas sem custo financeiro e de código aberto. Confira o compilador de fontes nanoemoji, que permite criar fontes COLRv1 de imagens de origem SVG e testá-las no Chrome 98 ou em versões mais recentes. Tente dar seu próprio toque ao Bungee Spice mudando as cores de gradiente usando estas instruções.
Por exemplo, é possível modificar a fonte Bungee Spice para ter um gradiente azul e vermelho, assim:
Mande um tweet com seus resultados para @googlefonts 🙂 Por que não testar um gradiente radial ou de varredura?
Novidades do COLRv1
O formato de fonte oferece várias maneiras de oferecer suporte a cores, todas com vantagens diferentes, mas nenhuma foi bem-sucedida na Web até agora. Para saber mais sobre as compensações, dê uma olhada na palestra de Dominik na conferência BlinkOn 15. O Chrome 98 é compatível com o COLRv1, uma evolução do COLRv0. Esperamos que a combinação de recursos gráficos e arquivos compactos do COLRv1 o torne uma boa escolha para muitos casos de uso de fontes coloridas. A COLRv1 adiciona gradientes, composição e mistura, além de melhorar a reutilização de formas internas para criar arquivos ainda mais compactos.
O COLRv1 tem um recurso expressivo equivalente à versão nativa do SVG (link em inglês), além da combinação e composição adicionadas à parte superior. Existem quatro tipos de preenchimento de cor: cores sólidas, gradientes lineares, radiais e gradientes de varredura/cônico. A COLRv1 permite reposicionar e transformar elementos de glifo usando um conjunto completo de transformações de translação, rotação, transparência e escala. Além disso, ela oferece suporte a variações de fonte e reutiliza os formatos de definição de forma existentes na fonte.
Pense no emoji de bola de cristal por exemplo: os destaques em forma de estrela têm a mesma forma, mas tamanhos diferentes, o que significa que apenas uma forma pode ser reposicionada e reutilizada sem duplicação dentro do arquivo. O formato permite reutilizar um glifo completo dentro de um novo glifo, sem precisar codificar de modo redundante as mesmas formas para cada glifo. Imagine uma fonte de cores decorativa com decorações florais, em que as mesmas formas de flor são colocadas em letras diferentes, fazendo apenas referência a glifos de cor existentes. Para o caso de uso de fontes da Web, a COLRv1 compacta bem abaixo de woff2. Por exemplo, um build de teste do Twemoji usando COLRv1 leva cerca de 1,2 MB inflado, mas tem cerca de 0,6 MB na forma woff2. Um build do conjunto completo de Glyphs Noto Emoji foi reduzido de 9 MB na versão do bitmap para 1,85 MB no formato COLRv1+woff2.
Casos de uso de fontes de cores
Manchetes chamativas
Uma fonte com cores novas destaca os destaques visuais, os títulos e os banners.
Não é mais necessário substituir imagens: fontes de emoji
Se você oferece suporte a conteúdo gerado pelo usuário, seus usuários provavelmente usam emojis. Atualmente, é muito comum verificar textos e substituir todos os emojis encontrados por imagens para garantir uma renderização consistente em várias plataformas e a capacidade de oferecer suporte a emojis mais recentes do que o oferecido pelo SO. Em seguida, essas imagens precisam ser revertidas para texto durante as operações da área de transferência. Aqui está um exemplo real:
Se você tiver uma fonte de emojis, basta renderizar o texto na fonte, desta forma:
<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>
Da mesma forma, em um componente de reação com emoji, COLRv1 oferece a oportunidade de usar um arquivo de fonte compacto em vez de um catálogo de recursos de imagem.
Imagine quantas imagens você precisaria buscar para ter um seletor de emojis completo.
Cor nas fontes de ícones
O uso de cores em fontes de ícones aumenta a clareza e facilita a compreensão dos glifos.
Expressão artística
As fontes de cores com eficiência de espaço permitem novas formas de expressão artística em textos na Web. Este exemplo de fonte árabe no estilo kufi usa gradientes de cor como uma interpretação artística de como poderia ser o fluxo de tinta da caligrafia tradicional quando aplicado ao estilo kufi da escrita árabe, que se origina de não ter sido escrito com ponta e tinta, mas esculpido na pedra.
Detecção de recursos
No momento, é possível descobrir se um mecanismo de navegador oferece suporte a um formato de fonte de cor específico por meio da detecção do user agent ou pesquisando em uma biblioteca como o ChromaCheck do @PixelAmbacht para testar a renderização de glifos de cor no Canvas. As duas soluções não são ideais. O teste de recursos precisa detectar apenas um recurso específico e evitar a detecção do user agent. A biblioteca ChromaCheck não precisa executar operações de tela 2D que consomem muitos recursos para determinar o suporte.
A equipe do Chrome quer melhorar isso e iniciou uma série de discussões [1, 2] no grupo de trabalho do CSS para fornecer informações sobre o suporte à tecnologia de fontes do navegador em JavaScript e de maneira declarativa no CSS. A equipe planeja lançar uma detecção de recursos eficiente para fontes de cores e outras tecnologias de fonte em uma versão futura do Chrome.
Se você quiser usar fontes coloridas no seu projeto agora, quando o suporte para COLRv1 está limitado ao Chrome, há duas maneiras de fazer isso: peça ao seu fornecedor de fontes uma fonte COLRv1 que também contenha glifos monocromáticos. Os user agents que não são compatíveis com COLRv1 vão voltar a renderizar glifos monocromáticos. Como alternativa, é possível usar a biblioteca ChromaCheck ou a detecção do user agent para determinar se o suporte ao COLRv1 está disponível. Em seguida, você envia um CSS que carrega fontes COLRv1 em user agents de suporte e usa um formato alternativo como COLRv0, um formato de fonte de bitmap ou OpenType SVG em outros navegadores.
Suporte à paleta de fontes do CSS
Seria muito útil se o uso de um conjunto diferente de cores não exigisse uma nova fonte. Felizmente, existe um mecanismo: a propriedade CSS font-palette. A equipe do Chrome está trabalhando para adicionar suporte à font-palette do Chrome.
Fontes COLRv1 e você
Se as fontes COLRv1 despertarem seu interesse, pergunte ao seu fornecedor sobre uma fonte de cor COLRv1 para usar no seu projeto, teste os exemplos e demonstrações acima ou, por que não começar a criar criar sua própria fonte?
Se você tiver feedback sobre o COLRv1 no Chrome, poste na lista de e-mails blink-dev ou informe um problema no nosso Issue Tracker. Se você tiver feedback sobre o formato de fonte COLRv1, registre um problema no repositório do GitHub da especificação COLRv1 (em inglês).
Com o Chrome 98, estamos empolgados sobre como o COLRv1 traz um nível totalmente novo de criatividade tipográfica para a Web.
Saiba mais
Se estiver interessado em mais detalhes, temos mais alguns recursos para você:
Para saber como o COLRv1 funciona e como é implementado no Chrome, confira a palestra de Dominik sobre o BlinkOn 15.
- Conferência internacional sobre Unicode 45: fontes de cores vetoriais, palestra de Roderick Sheeter, Peter Constable e Dominik Röttsches (vídeo, detalhes da palestra)
- compilador de fontes nanoemoji (link em inglês), produzindo fontes COLRv1 com base em imagens SVG
- O repositório de fontes de cores do GitHub (link em inglês) do Google Fonts contendo builds atuais do Noto Emoji, Twemoji e outras fontes de exemplo.
- Apresentação do DJR com a fonte Bradley Initials, explorando o COLRv1
- Ferramenta e biblioteca ChromaCheck para detectar as tecnologias de fonte de cores disponíveis
Agradecimentos
Muitos agradecimentos a 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 Niesvother1, por suas contribuições.