Caratteri vettoriali a colori compatti e facili da comprimere con tutte le tue sfumature di gradiente preferite.
In Chrome 98, i team di Chrome e Fonts hanno aggiunto il supporto per COLRv1, un'evoluzione del formato di carattere COLRv0 pensata per diffondere i caratteri a colori aggiungendo sfumature, composizione e fusione, nonché un riutilizzo interno delle forme migliorato per file di caratteri nitidi e compatti che si comprimono bene.
Colora ora
Sul web, il testo viene generalmente disegnato in un colore specificato in CSS. Il carattere non definisce un colore particolare, ma indica solo dove devono essere posizionati i pixel. Di solito è un bene. Il 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, questa bandiera 
con strisce azzurre, rosa e bianche non
trasmetterebbe lo stesso significato se fosse semplicemente disegnata con il colore del testo corrente.
Oggi, per la maggior parte degli utenti, le emoji sono gli unici caratteri a colori che vedono. Le emoji
in genere vengono visualizzate sul web tramite il carattere emoji di sistema o inserendo immagini
(il che ha le sue complicazioni, 
). Le dimensioni
dei file di grandi dimensioni, in particolare per i caratteri a colori basati su bitmap, hanno reso difficile l'utilizzo di caratteri web
per le emoji. Supportando COLRv1, speriamo di assistere a una proliferazione dell'utilizzo di caratteri colorati creativi sul web e non solo.
Ora puoi creare i tuoi caratteri COLRv1 utilizzando 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 personalizzare Bungee Spice modificando i colori del gradiente seguendo queste istruzioni.
Ad esempio, potresti modificare il carattere Bungee Spice in modo che abbia un gradiente blu e rosso, come questo:
Twitta i tuoi risultati a @googlefonts 🙂 Perché non provi una sfumatura radiale o a raggiera?
Novità di COLRv1
Il formato del carattere supporta diversi modi per supportare il colore, tutti con diversi compromessi, ma nessuno ha avuto successo sul web finora. Per scoprire di più sui compromessi, guarda il discorso di Dominik alla conferenza BlinkOn 15. Chrome 98 introduce il supporto di COLRv1, un'evoluzione di COLRv0. Ci auguriamo che la combinazione di funzionalità grafiche e file compatti di COLRv1 lo renda una buona scelta per molti casi d'uso dei caratteri a colori. COLRv1 aggiunge sfumature, composizione e fusione e migliora il riutilizzo delle forme interne per creare file ancora più compatti.
COLRv1 ha una capacità espressiva più o meno equivalente a SVG Native più fusione e composizione aggiunte in più. Esistono quattro tipi di riempimenti di colore: colori solidi, sfumature lineari, sfumature radiali e sfumature a raggiera/coniche. COLRv1 consente di riposizionare e trasformare gli elementi dei glifi utilizzando un set completo di trasformazioni di traslazione, rotazione, taglio e ridimensionamento. Inoltre, supporta le varianti dei caratteri e riutilizza i formati di definizione delle forme esistenti nel carattere.
Prendi in considerazione l'emoji della sfera di cristallo come esempio: le luci a forma di stella hanno la stessa forma ma dimensioni diverse, il che significa che una sola forma può essere riposizionata e riutilizzata senza duplicazione 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 di fiori vengono posizionate su lettere diverse semplicemente facendo riferimento ai glifi a colori esistenti. Per il caso d'uso dei caratteri web, COLRv1 si comprime bene in woff2. Ad esempio, una build di test di Twemoji che utilizza COLRv1 occupa circa 1,2 MB compressa, ma circa 0,6 MB in formato WOFF2. Una build dell'intero set di glifi Noto Emoji è ridotta da 9 MB per la versione bitmap a 1,85 MB nel formato COLRv1+woff2.
Casi d'uso dei caratteri a colori
Nessuna sostituzione di immagini: caratteri emoji
Se supporti i contenuti generati dagli utenti, questi probabilmente utilizzano le emoji. Oggi è molto comune scansionare il testo e sostituire le emoji incontrate con immagini per garantire un rendering multipiattaforma coerente e la possibilità di supportare emoji più recenti di quelle supportate dal sistema operativo. Queste immagini devono poi essere riconvertite in testo durante le operazioni sugli appunti. Ecco un esempio reale:
Se hai un font emoji, devi solo eseguire il rendering del testo nel font, 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>
Allo stesso modo, in un componente di reazione con emoji, COLRv1 offre la possibilità di utilizzare un file di caratteri compatto anziché un catalogo di asset immagine.
Immagina quante immagini dovresti recuperare per un selettore di emoji completo.
Colore nei caratteri delle icone
L'utilizzo del colore nei caratteri delle icone aggiunge chiarezza e rende i glifi più facili da comprendere.
Espressione artistica
I caratteri a colori efficienti in termini di spazio consentono nuove forme di espressione artistica nel testo sul web. Questo esempio di carattere arabo in stile kufi utilizza sfumature di colore come interpretazione artistica di come potrebbe apparire il flusso di inchiostro della calligrafia tradizionale se applicato allo stile kufi della scrittura araba, che ha origine dal fatto di non essere scritta con pennino e inchiostro, ma incisa nella pietra.
Rilevamento delle funzionalità
Al momento, è possibile capire se un motore del browser supporta un formato di carattere a colori specifico tramite lo sniffing dello user-agent o la ricerca in una libreria come ChromaCheck di @PixelAmbacht per testare il rendering dei glifi a colori su Canvas. Entrambe le soluzioni non sono ottimali. Il test delle funzionalità deve rilevare solo una funzionalità specifica ed evitare lo sniffing dello user agent. La libreria ChromaCheck non dovrebbe dover eseguire operazioni di canvas 2D che richiedono molte risorse per determinare il supporto.
Il team di Chrome vuole migliorare questo aspetto e ha avviato una serie di discussioni [1, 2] nel gruppo di lavoro CSS per fornire informazioni sul supporto della tecnologia dei caratteri del browser in JavaScript e in modo dichiarativo in CSS. Il team prevede di rilasciare il rilevamento efficiente delle funzionalità per i caratteri a colori e altre tecnologie di caratteri in una versione futura di Chrome.
Se vuoi utilizzare i caratteri a colori nel tuo progetto in questo momento, quando il supporto di COLRv1 è limitato a Chrome, puoi farlo in due modi: chiedi al fornitore di caratteri un carattere COLRv1 che contenga anche glifi monocromatici. Gli user agent che non supportano COLRv1 eseguiranno il rendering dei glifi monocromatici. In alternativa, puoi utilizzare la libreria ChromaCheck o lo sniffing dell'user agent per determinare se è disponibile il supporto di COLRv1. Poi fornisci CSS che caricano i caratteri COLRv1 negli user agent supportati e utilizza un formato di carattere alternativo come COLRv0, un formato di carattere bitmap o OpenType SVG in altri browser.
Supporto della proprietà CSS font-palette
Sarebbe estremamente utile se l'utilizzo di un diverso set di colori non richiedesse un nuovo carattere. Fortunatamente, 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.
Caratteri COLRv1 e tu
Se i caratteri COLRv1 ti interessano, chiedi al tuo fornitore di caratteri un carattere a colori COLRv1 da utilizzare nel tuo progetto, prova gli esempi e le demo riportati sopra o perché non provi subito a crearne uno tuo?
Se hai feedback su COLRv1 in Chrome, pubblicalo nella mailing list blink-dev o segnala un problema nel nostro strumento di monitoraggio dei problemi. Se hai feedback sul formato del carattere COLRv1, segnala un problema nel repository GitHub delle specifiche COLRv1.
Con Chrome 98, siamo entusiasti di come COLRv1 porti un nuovo livello di creatività tipografica sul web.
Scopri di più
Se ti interessano maggiori dettagli, abbiamo altre risorse per te:
Per scoprire come funziona COLRv1 e come viene implementato in Chrome, guarda la presentazione di Dominik alla conferenza BlinkOn 15.
- International Unicode Conference #45: Vector Color Fonts, intervento di Roderick Sheeter, Peter Constable e Dominik Röttsches (video, dettagli dell'intervento)
- Compilatore di caratteri nanoemoji, che produce caratteri COLRv1 da immagini SVG
- Repository GitHub color-fonts di Google Fonts contenente le build attuali di Noto Emoji, Twemoji e altri caratteri di esempio
- La presentazione di DJR del carattere Bradley Initials, che esplora COLRv1
- Strumento e libreria ChromaCheck per rilevare le tecnologie di caratteri a colori disponibili
Ringraziamenti
Un ringraziamento speciale 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 il loro contributo a COLRv1.