Fontes vetoriais compactas e otimizadas para compactação com suas fontes favoritas variações de gradientes.
No Chrome 98, as equipes do Chrome e do Fonts adicionaram o suporte ao COLRv1, um uma evolução do formato de fonte COLRv0 destinada a disseminar fontes de cores adição de gradientes, composição e mistura, além de melhor reutilização interna de formas para arquivos de fonte nítidos e compactos que compactam bem.
Colorir agora
Na Web, o texto geralmente é desenhado na cor especificada no CSS. A fonte faz
não define uma cor específica, apenas indica onde os pixels devem
colocados. Isso geralmente é bom. O CSS permite que o autor escolha de forma flexível
cor No entanto, às vezes um glifo contém várias cores que, juntas,
significado. Por exemplo, esta sinalização 
com listras azul-claro, rosa e branca não deveria
transmitir o mesmo significado se fosse simplesmente desenhado na cor de texto atual.
Hoje, para a maioria dos usuários, os emojis são as únicas fontes de cores que eles veem. Emojis
geralmente aparecem na Web pela fonte de emojis do sistema ou inserindo imagens
(que tem as próprias complicações, 
). Arquivo grande
especialmente para fontes coloridas baseadas em bitmap
fontes para emojis. Ao apoiar o COLRv1, esperamos ver uma proliferação de
o uso de fontes de cores criativas na Web e em outros lugares.
Me mostre as cores
Criamos alguns exemplos para você testar:
Os recursos de exemplo do Google Fonts usados no exemplo estão ativos na API Google Fonts Web. São listados no diretório em fonts.google.com como elas só funcionarão no Chrome 98 ou posterior e exibir trabalhos experimentais.
Agora você pode criar suas próprias fontes COLRv1 usando ferramentas sem custo financeiro e de código aberto. Marca de seleção o compilador de fontes nanoemojis que permite criar fontes COLRv1 a partir de imagens SVG, e testá-las Chrome 98 ou mais recente. Faça seu próprio jogo no Bungee Spice alterando a cores gradientes usando estas instruções.
Por exemplo, você pode modificar a fonte Bungee Spice para ter um gradiente azul e vermelho, assim:
Envie um tweet com seus resultados para @googlefonts 🙂 Que tal usar um gradiente radial ou de varredura?
Novo com COLRv1
O formato de fonte oferece suporte a várias formas de cor, todas com diferentes vantagens e desvantagens, mas nenhuma teve sucesso na Web até o momento. Para saber mais sobre as vantagens e desvantagens, confira a palestra de Dominik na conferência BlinkOn 15.) O Chrome 98 oferece suporte ao COLRv1, uma evolução do COLRv0. Esperamos que A combinação de recursos gráficos e arquivos compactos do COLRv1 o tornará uma boa escolha para muitos casos de uso de fontes coloridas. COLRv1 adiciona gradientes, composição e combinação, e melhora reutilização de formas internas para criar arquivos ainda mais compactos.
O COLRv1 tem uma capacidade expressiva equivalente a SVG nativo mais combinação e composição adicionadas em topo. Existem quatro tipos de preenchimento de cores: cores sólidas, gradientes lineares, cores gradientes de varredura e cônicos. O COLRv1 permite reposicionar e transformar elementos glifo usando um conjunto completo de translação, rotação, purificação e escala transformações de dados. Além disso, ele oferece suporte a variações e reutilização de fontes formatos de definição de formas existentes na fonte.
Pense no emoji de bola de cristal como exemplo: os destaques em forma de estrela são a mesma forma, mas tamanhos diferentes, ou seja, só uma forma pode ser reposicionados e reutilizados sem duplicação dentro do arquivo. O formato permite reutilizar um glifo completo dentro de um novo, sem precisar de forma redundante codificar as mesmas formas para cada glifo. Imagine uma fonte de cor decorativa com decorações florais, em que as mesmas formas de flores são colocadas em letras diferentes fazendo referência apenas aos glifos de cores existentes. Para o caso de uso de fontes da Web, COLRv1 é bem compactado bem abaixo de woff2. Por exemplo, um build de teste do Twemoji usando COLRv1. ocupa cerca de 1,2 MB inflado, mas tem cerca de 0,6 MB na forma woff2. Uma versão do O conjunto completo de Glyphs de emojis Noto foi reduzido de 9 MB na versão em bitmap para 1,85 MB no formato COLRv1+woff2.
Casos de uso de fontes coloridas
Manchetes interessantes
Uma fonte com uma nova cor faz os destaques visuais, os títulos e os banners realmente se destacam para fora.
Não há mais substituição de imagens: fontes de emojis
Se você oferece suporte a conteúdo gerado pelo usuário, seus usuários provavelmente usam emojis. Hoje é muito comum digitalizar o texto e substituir todos os emojis encontrados por imagens para garantir um processamento consistente em várias plataformas e a capacidade de oferecer suporte emojis que o SO aceita. Essas imagens precisam voltar a ser texto durante as operações da área de transferência. Aqui está um exemplo real:
Se você tiver uma fonte de emoji, 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, o 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ê teria que buscar para conseguir um seletor completo de emojis.
Colorir fontes de ícones
O uso de cores em fontes de ícones deixa os glifos mais claros e facilita a compreensão.
Expressão artística
Fontes coloridas que não consomem espaço suficiente possibilitam 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 uma interpretação artística do que o fluxo de tinta da caligrafia tradicional quando aplicado ao estilo Kufi da escrita árabe, que se origina não sejam escritas com ponta e tinta, mas esculpidas na pedra.
Detecção de recursos
No momento, descobrir se um mecanismo de navegador oferece suporte a uma cor específica formato de fonte possível por meio da interceptação do user agent ou da pesquisa de um biblioteca, como ChromaCheck, de @PixelAmbacht para testar a renderização de cores glifos no Canvas. As duas soluções não são ideais. O teste de atributos deve detectar somente um recurso específico e evitar as interceptações do user agent. ChromaCheck não precisa executar operações de tela 2D que consomem muitos recursos para e 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 em CSS. A equipe planeja lançar uma detecção eficiente de recursos para fontes coloridas e outras tecnologias de fontes em uma versão futura do Chrome.
Se você quiser usar fontes de cores no seu projeto agora quando COLRv1 o suporte é limitado ao Chrome. Há duas maneiras de fazer isso: pergunte qual fonte fornecedor de uma fonte COLRv1 que também contém glifos monocromáticos. User agents que não forem compatíveis com COLRv1 voltará para a renderização monocromática glifos Também é possível usar a biblioteca ChromaCheck ou o user agent para determinar se o suporte a COLRv1 está disponível. Depois, envie o CSS que carrega fontes COLRv1 em user agents compatíveis e usa uma fonte alternativa como COLRv0, um formato de fonte de bitmap ou SVG OpenType em outros navegadores.
Compatibilidade com paleta de fontes CSS
Seria extremamente útil se usar um conjunto diferente de cores não fosse útil exigem uma nova fonte. Felizmente, existe um mecanismo: propriedade CSS da fonte-palette. A A equipe do Chrome está trabalhando para adicionar suporte para a paleta de fontes no Chrome (link em inglês).
Fontes e COLRv1 você
Se você tiver interesse em fontes COLRv1, pergunte ao fornecedor de fontes sobre uma cor COLRv1. fonte para usar no seu projeto, confira os exemplos e demonstrações acima ou por que não mergulhar e experimentar fazer seu próprio vídeo?
Se você tiver feedback sobre o COLRv1 no Chrome, poste no lista de e-mails blink-dev, ou informe um problema no Issue Tracker. Se você tiver feedback sobre o formato de fonte COLRv1, registre um problema no Repositório do GitHub da especificação COLRv1 (link em inglês).
Com o Chrome 98, ficamos empolgados com o novo patamar do COLRv1 em da criatividade tipográfica para a Web.
Saiba mais
Se estiver interessado em saber mais detalhes, temos mais alguns recursos para você:
Para saber como o COLRv1 funciona e como é implementado no Chrome, confira a conferência BlinkOn 15 da Dominik.
- International Unicode Conference #45: Vector Color Fonts, palestra de Roderick Sheeter, Peter Constable e Dominik Röttsches (vídeo, detalhes da conversa)
- compilador de fontes nanoemojis, produzindo Fontes COLRv1 de imagens SVG
- do Google Fonts repositório color-fonts do GitHub (em inglês) contendo builds atuais do Noto Emoji, Twemoji e outras fontes de exemplo
- Vitrine da fonte Bradley Initials feita por DJR, explorando o COLRv1.
- ferramenta e biblioteca ChromaCheck para tecnologias de fontes coloridas disponíveis com detecção de recursos
Agradecimentos
Muito obrigado 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 Nieskens e outras pessoas por suas contribuições ao COLRv1.