Caratteri vettoriali compatti e adatti alla compressione, con tutti i gusti di gradiente che preferisci.
In Chrome 98, i team di Chrome e Fonts hanno aggiunto il supporto per COLRv1, un'evoluzione del formato di carattere COLRv0 che ha lo scopo di ampliare la diffusione dei caratteri a colori con l'aggiunta di gradienti, la composizione e la combinazione, nonché migliorato il riutilizzo delle forme interne per file di caratteri nitidi e compatti che si comprimono bene.
Colora ora
Sul web, il testo viene generalmente disegnato con un colore specificato in CSS. Il carattere non definisce un colore particolare, ma indica solo dove devono essere posizionati i pixel. Di solito è una cosa positiva. CSS consente all'autore di scegliere
in modo flessibile un colore. Tuttavia, a volte un glifo contiene più colori che insieme hanno un significato. Ad esempio, questo flag 
con strisce azzurro, rosa e bianche non trasmetterà lo stesso significato se fosse semplicemente disegnato nel colore del testo corrente.
Attualmente, per la maggior parte degli utenti, le emoji sono l'unico carattere a colori che vede. In genere le emoji vengono visualizzate sul web tramite il carattere delle emoji di sistema o inserendo immagini (che ha le sue complicazioni, 
). File di grandi dimensioni, soprattutto per i caratteri a colori basati su bitmap, hanno reso difficile l'utilizzo dei caratteri web per le emoji. Con il supporto di COLRv1, speriamo di vedere una proliferazione dell'uso
dei caratteri di colore creativi sul web e non solo.
Mostrami i tuoi colori
Abbiamo creato un paio di esempi con cui sperimentare:
Gli asset di Google Fonts utilizzati nell'esempio sono disponibili nell'API web di Google Fonts. Non sono elencati nella directory all'indirizzo fonts.google.com perché funzionano solo su Chrome 98 o versioni successive e mostrano il lavoro sperimentale.
Ora puoi creare i tuoi caratteri COLRv1 usando strumenti senza costi e open source. Dai un'occhiata al compilatore di caratteri nanoemoji che ti consente di creare caratteri COLRv1 da immagini di origine SVG, quindi provali in Chrome 98 o versioni successive. Prova a dare il tuo tocco personale a Bungee Spice modificando i colori dei gradienti seguendo queste istruzioni.
Ad esempio, puoi modificare il carattere Bungee Spice in modo che abbia un gradiente blu e rosso, come questo:
Tweet i tuoi risultati su @googlefonts 🙂 Perché non provi un gradiente radiale o a comparsa?
Novità con COLRv1
Il formato dei caratteri supporta diversi metodi per supportare i colori, tutti con pro e contro diversi, ma nessuno è riuscito finora sul web. Per scoprire di più sui compromessi, dai un'occhiata alla conferenza BlinkOn 15 di Dominik. Chrome 98 offre il supporto per COLRv1, un'evoluzione di COLRv0. Speriamo che la combinazione di funzionalità grafiche e file compatti di COLRv1 lo renda una buona scelta per molti casi d'uso di caratteri a colori. COLRv1 aggiunge gradienti, compositing e combinazione e migliora il riutilizzo delle forme interne per creare file ancora più compatti.
COLRv1 ha capacità espressive più o meno equivalenti a quelle SVG Native, oltre a combinazione e compositing aggiunte in alto. Esistono quattro tipi di riempimenti di colore: a tinta unita, a gradiente lineare, a gradiente radiale e a gradiente/conica. COLRv1 consente di riposizionare e trasformare elementi glifi utilizzando un set completo di trasformazioni di traslazione, rotazione, trasparenza e scala. Inoltre, supporta le varianti dei caratteri e riutilizza i formati di definizione delle forme esistenti nel carattere.
Pensiamo all'emoji della sfera di cristallo come esempio: le evidenziazioni a forma di stella hanno la stessa forma ma dimensioni diverse, il che significa che è possibile riposizionare e riutilizzare una sola forma senza duplicati all'interno del file. Il formato consente di riutilizzare un glifo completo all'interno di un nuovo glifo, senza dover codificare in modo ridondante le stesse forme per ogni glifo. Immagina un carattere decorativo a colori con decorazioni floreali, in cui le stesse forme floreali sono posizionate su lettere diverse facendo riferimento ai glifi cromatici esistenti. Nel caso d'uso dei caratteri web, COLRv1 comprime bene in woff2. Ad esempio, una build di test di Twemoji che utilizza COLRv1 richiede circa 1,2 MB di spazio gonfiato, ma circa 0,6 MB in formato woff2. Una build dell'intero set Noto Emoji Glyph viene ridotta da 9 MB per la versione bitmap a 1,85 MB in formato COLRv1+woff2.
Casi d'uso per i caratteri colorati
Titoli accattivanti
Un nuovo carattere colorato mette in risalto le immagini, i titoli e i banner.
Nessun'altra sostituzione dell'immagine: caratteri emoji
Se supporti contenuti generati dagli utenti, i tuoi utenti probabilmente utilizzano emoji. Oggi è molto comune scansionare il testo e sostituire le emoji trovate con immagini per garantire un rendering multipiattaforma coerente e la possibilità di supportare emoji più recenti rispetto a quelle supportate dal sistema operativo. È necessario ripristinare queste immagini in testo durante le operazioni sugli appunti. Ecco un esempio reale:
Se hai un carattere emoji, ti basta visualizzare il testo nel carattere, in questo modo:
<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>
Analogamente, in un componente delle reazioni emoji, COLRv1 offre l'opportunità di utilizzare un file di caratteri compatto anziché un catalogo di asset immagine.
Immagina quante immagini avresti bisogno di recuperare per un selettore di emoji completo.
Colore nei caratteri delle icone
L'utilizzo del colore nei caratteri delle icone aggiunge chiarezza e semplifica la comprensione dei glifi.
Espressione artistica
I caratteri a colori a elevata efficienza dello spazio consentono di sviluppare nuove forme di espressione artistica nel testo sul web. Questo esempio di carattere arabo in stile Kufi usa i gradienti di colore come interpretazione artistica di come potrebbe apparire il flusso di inchiostro della calligrafia tradizionale quando applicato allo stile kufi della scrittura araba, che deriva dalla non scrittura con pennino e inchiostro ma scolpita nella pietra.
Rilevamento delle funzionalità
Al momento, capire se un motore del browser supporta uno specifico formato di carattere cromatico è possibile tramite lo sniffing dello user agent o cercando in una libreria come ChromaCheck di @PixelAmbacht per testare il rendering dei glifi colore su Canvas. Entrambe le soluzioni non sono ottimali. I test delle funzionalità dovrebbero rilevare solo una funzionalità specifica ed evitare lo sniffing dello user agent. La libreria ChromaCheck non dovrebbe dover eseguire operazioni su canvas 2D che richiedono molte risorse per la determinazione del supporto.
Il team di Chrome vuole migliorare questo aspetto e ha avviato una serie di discussioni [1, 2] all'interno del gruppo di lavoro CSS, per fornire informazioni sul supporto della tecnologia dei caratteri dei browser in JavaScript e dichiarativamente in CSS. Il team ha intenzione di rilasciare un rilevamento efficiente delle funzionalità per i caratteri colorati e altre tecnologie per i caratteri in una versione futura di Chrome.
Se al momento vuoi usare caratteri colorati nel tuo progetto quando il supporto di COLRv1 è limitato a Chrome, ci sono due modi per farlo. Chiedi al tuo fornitore di caratteri di indicare un carattere COLRv1 che contenga anche glifi monocromatici. Gli user agent che non supportano COLRv1 ricorreranno al rendering dei glifi monocromatici. In alternativa, puoi utilizzare la libreria ChromaCheck o lo sniffing dello user agent per determinare se è disponibile il supporto per COLRv1. Poi pubblica il codice CSS che carica i caratteri COLRv1 nel supporto degli user agent e utilizza un formato di carattere alternativo come COLRv0, un formato di carattere bitmap o SVG OpenType in altri browser.
Supporto della tavolozza dei caratteri CSS
Sarebbe estremamente utile se l'uso di un set di colori diverso non richiedesse un nuovo carattere. Per fortuna, esiste un meccanismo: la proprietà CSS font-palette. Il team di Chrome sta lavorando per aggiungere il supporto per la tavolozza dei caratteri in Chrome.
Tu e i caratteri COLRv1
Se i caratteri COLRv1 stuzzicano il tuo interesse, chiedi al tuo fornitore di caratteri di scegliere un carattere COLRv1 da utilizzare nel tuo progetto, prova gli esempi e le demo riportati sopra, oppure prova subito a crearne uno tutto tuo.
Se hai feedback su COLRv1 in Chrome, pubblica un post nella mailing list blink-dev o segnala un problema nel nostro Issue Tracker. Se hai feedback sul formato dei caratteri COLRv1, segnala un problema nel repository GitHub della specifica COLRv1.
Con Chrome 98, siamo entusiasti di come COLRv1 introduce un nuovo livello di creatività tipografica sul web.
Scopri di più
Per saperne di più, abbiamo altre risorse a tua disposizione:
Per scoprire come funziona COLRv1 e come viene implementato in Chrome, dai un'occhiata alla conferenza BlinkOn 15 di Dominik.
- International Unicode Conference #45: Vector Color Fonts, discorso di Roderick Sheeter, Peter Constable e Dominik Röttsches (video, dettagli della presentazione)
- Compilatore di caratteri nanoemoji, che produce caratteri COLRv1 da immagini SVG
- Il repository GitHub di colori-fonts di Google Fonts contiene build attuali di Noto Emoji, Twemoji e altri caratteri di esempio.
- Vetrina di DJR del carattere Bradley Initials, mentre esplora COLRv1
- Lo strumento e la libreria ChromaCheck per rilevare le funzionalità delle tecnologie per i caratteri a colori disponibili,
Ringraziamenti
Grazie mille 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 altri per i loro contributi a COLRv1.