Caratteri vettoriali a colori compatti e adatti alla compressione con tutte le sfumature di gradiente che preferisci.
In Chrome 98, i team di Chrome e Fonts hanno aggiunto il supporto di COLRv1, un'evoluzione del formato dei caratteri COLRv0 che ha lo scopo di diffondere i caratteri a colori aggiungendo gradienti, composizione e fusione e migliorando il riutilizzo delle forme interne per file dei caratteri nitidi e compatti che si comprimono bene.
Colora ora
Sul web, il testo viene generalmente visualizzato in un colore specificato in CSS. Il carattere non
definisce un colore particolare, ma indica solo dove devono essere collocati 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, questo indicatore 
con strisce azzurre, rosa e bianche non trasmetterebbe lo stesso significato se fosse semplicemente disegnato nel colore del testo corrente.
Oggi, per la maggior parte degli utenti, le emoji sono gli unici caratteri a colori che vedono. Le emoji solitamente vengono visualizzate sul web tramite il carattere emoji di sistema o inserendo immagini (che hanno le loro complicazioni, 
). I grandi dimensioni dei file, in particolare per i caratteri a colori basati su bitmap, hanno reso difficile l'utilizzo dei caratteri web per le emoji. Con il supporto di COLRv1, ci auguriamo di assistere a una proliferazione dell'uso di caratteri colorati creativi sul web e non solo.
Mostra la tua personalità
Abbiamo creato un paio di esempi con cui puoi fare pratica:
Gli asset di esempio di Google Fonts utilizzati nell'esempio sono disponibili nell'API web Google Fonts. Non sono elencati nella directory all'indirizzo fonts.google.com perché funzioneranno solo su Chrome 98 o versioni successive e mostrano lavori sperimentali.
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 dalle immagini di origine SVG, quindi provali in Chrome 98 o versioni successive. Prova a dare un tocco personale a 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 mostrato di seguito:
Tweeta i risultati a @googlefonts 🙂 Perché non provare una sfumatura radiale o a scorrimento?
Novità di COLRv1
Il formato del carattere supporta più modi per supportare il colore, tutti con compromessi diversi, ma finora nessuno ha avuto successo sul web. Per scoprire di più sui compromessi, dai un'occhiata al 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 colorati. COLRv1 aggiunge gradienti, composizione e fusione e migliora il riutilizzo delle forme interne per rendere i file ancora più compatti.
COLRv1 ha una capacità espressiva approssimativamente equivalente a quella di SVG Native, oltre a mescola e composizione aggiunte al di sopra. Esistono quattro tipi di riempimenti di colore: colori a tinta unita, gradienti lineari, gradienti radiali e gradienti con andamento a ventaglio/conici. COLRv1 ti consente di riposizionare e trasformare gli elementi dei glifi utilizzando un insieme completo di trasformazioni di traslazione, rotazione, inclinazione e ridimensionamento. Inoltre, supporta le variazioni dei caratteri e riutilizza i formati di definizione delle forme esistenti nel carattere.
Prendi ad esempio l'emoji della sfera di cristallo: gli evidenziatori 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 sono posizionate su lettere diverse facendo semplicemente 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 dopo l'inflazione, ma circa 0,6 MB in formato woff2. Una build dell'intero insieme di glifi Emoji Noto viene ridotta da 9 MB per la versione bitmap a 1,85 MB in formato COLRv1+woff2.
Casi d'uso dei caratteri colorati
Titoli accattivanti
Un carattere colorato mette in risalto gli elementi visivi, i titoli e i banner.
Niente più sostituzione di immagini: caratteri emoji
Se supporti i contenuti generati dagli utenti, è probabile che i tuoi utenti utilizzino le emoji. Oggigiorno è molto comune eseguire la scansione del testo e sostituire le emoji rilevate con immagini per garantire un rendering multipiattaforma coerente e la possibilità di supportare emoji più recenti rispetto a quelle supportate dal sistema operativo. Queste immagini devono quindi essere convertite nuovamente in testo durante le operazioni della clipboard. Ecco un esempio reale:
Se hai un carattere emoji, devi solo visualizzare il testo nel carattere, ad esempio:
<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 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 icona aggiunge chiarezza e rende i glifi più facili da comprendere.
Espressione artistica
I caratteri colorati che occupano poco spazio consentono nuove forme di espressione artistica nel testo sul web. Questo esempio di un carattere arabo in stile Kufi utilizza le 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 avuto origine dal fatto che non veniva scritto con pennino e inchiostro, ma scolpito nella pietra.
Rilevamento di 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 cercando in una libreria come ChromaCheck di @PixelAmbacht per testare il rendering dei glifi a colori su Canvas. Entrambe le soluzioni non sono ottimali. I test delle funzionalità devono 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 determinare il supporto.
Il team di Chrome vuole migliorare la situazione e ha avviato una serie di discussioni [1, 2] nel gruppo di lavoro CSS per fornire informazioni sul supporto della tecnologia dei caratteri dei browser in JavaScript e in modo dichiarativo in CSS. Il team prevede di rilasciare un rilevamento efficiente delle funzionalità per i caratteri colorati e altre tecnologie dei caratteri in una versione futura di Chrome.
Se vuoi utilizzare i caratteri colorati nel tuo progetto ora che il supporto di COLRv1 è limitato a Chrome, hai due possibilità: chiedi al tuo fornitore di caratteri un carattere COLRv1 che contenga anche glifi monocromatici. Gli user agent che non supportano COLRv1 torneranno al rendering di glifi monocromatici. In alternativa, puoi utilizzare la libreria ChromaCheck o lo sniffing dell'agente utente per determinare se è disponibile il supporto di COLRv1. Poi, invii CSS che carica i caratteri COLRv1 negli user agent supportati e utilizza un formato carattere alternativo come COLRv0, un formato carattere bitmap o OpenType SVG in altri browser.
Supporto della tavolozza dei caratteri CSS
Sarebbe estremamente utile se l'utilizzo di un insieme diverso 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 di font-palette in Chrome.
I caratteri COLRv1 e tu
Se i caratteri COLRv1 ti interessano, chiedi al tuo fornitore di caratteri un carattere colore COLRv1 da utilizzare nel tuo progetto, prova gli esempi e le demo riportati sopra o perché non iniziare subito a sperimentare con la creazione dei tuoi?
Se hai feedback su COLRv1 in Chrome, pubblicali nella mailing list blink-dev o segnala un problema nel nostro issue tracker. Se hai un feedback sul formato del carattere COLRv1, segnala un problema nel repository GitHub delle specifiche COLRv1.
Con Chrome 98, siamo entusiasti di come COLRv1 offra un nuovo livello di creatività tipografica sul web.
Scopri di più
Se vuoi saperne di più, ecco altre risorse a tua disposizione:
Per scoprire come funziona COLRv1 e come viene implementato in Chrome, guarda il discorso di Dominik alla conferenza BlinkOn 15.
- Conferenza internazionale Unicode n. 45: Vector Color Fonts, conferenza di Roderick Sheeter, Peter Constable e Dominik Röttsches (video, dettagli della conferenza)
- nanoemoji font compiler, 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
- DJR mostra il carattere Bradley Initials, esplorando COLRv1
- Strumento e libreria ChromaCheck per rilevare le tecnologie dei 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 i loro contributi a COLRv1.