Caratteri vettoriali a colori compatti e facili da comprimere con tutti i tuoi di gradienti.
In Chrome 98, i team di Chrome e Fonts hanno aggiunto il supporto per COLRv1, una evoluzione del formato dei caratteri COLRv0, inteso a rendere i caratteri a colori diffusi aggiunta di gradienti, composizione e fusione e miglioramento del riutilizzo delle forme interne per file di caratteri netti e compatti che si comprimono bene.
Colora ora
Sul web, il testo viene generalmente disegnato in un colore specificato in CSS. Il carattere
non definire un colore particolare, ma indica solo dove dovrebbero essere
inserito. Di solito è una cosa positiva. CSS consente all'autore di scegliere
colore. Tuttavia, a volte un glifo contiene più colori che insieme hanno
significato. Ad esempio, questa bandiera 
con strisce azzurre, rosa e bianche non
comunicano lo stesso significato se sono stati semplicemente disegnati con il colore del testo corrente.
Oggi, per la maggior parte degli utenti, le emoji sono gli unici caratteri di colore che vedono. Emoji
vengono generalmente visualizzati sul web tramite il carattere emoji del sistema o inserendo immagini
(che ha le sue complicazioni, 
). File di grandi dimensioni
dimensioni, soprattutto per i caratteri a colori basati su bitmap, hanno reso difficile l'utilizzo
caratteri per emoji. Supportando COLRv1, ci auguriamo di vedere una proliferazione di
l'utilizzo dei caratteri dei colori delle creatività sul web e non solo.
Mostrami i tuoi colori
Abbiamo creato un paio di esempi con cui sperimentare:
Gli asset di esempio di Google Fonts utilizzati nell'esempio sono disponibili nel API web di Google Fonts. Sono non elencato nella directory all'indirizzo fonts.google.com come funzioneranno solo su Chrome 98 o versioni successive e presenteranno lavori sperimentali.
Ora puoi creare i tuoi caratteri COLRv1 utilizzando strumenti senza costi e open source. Controllo il compilatore di caratteri nanoemoji che consente di creare caratteri COLRv1 a partire da immagini sorgente SVG, per poi provarli in Chrome 98 o versioni successive. Prova a dare il tuo tocco personale a Bungee Spice cambiando la colori a gradiente utilizzando queste istruzioni.
Ad esempio, puoi modificare il carattere Bungee Spice in modo che abbia una sfumatura blu e rossa, come in questo esempio:
Tweet i tuoi risultati a @googlefonts 🙂 Perché non provare un gradiente radiale o con sweep?
Novità con COLRv1
Il formato dei caratteri supporta diversi modi per supportare i colori, tutti con diversi 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 per COLRv1, un'evoluzione di COLRv0. Ci auguriamo che La combinazione di funzionalità grafiche e file compatti di COLRv1 lo renderà un una buona scelta per molti casi d'uso di caratteri a colori. COLRv1 aggiunge sfumature compositing e fusione e migliora riutilizzo interno della forma per rendere i file ancora più compatti.
COLRv1 ha una capacità espressiva quasi equivalente a Nativo SVG più combinazione e compositing aggiunti su in alto. Esistono quattro tipi di riempimenti di colore: colori a tinta unita, sfumature lineari, radiali gradienti e gradienti conici/sweep. COLRv1 consente di riposizionare e trasformare elementi glifo utilizzando un set completo di traslazione, rotazione, sheer e scala e piccole trasformazioni. Inoltre, supporta le varianti e i riutilizzi dei caratteri. esistenti formati di definizione della forma nel carattere.
Pensa ad esempio all'emoji della sfera di cristallo: le alte luci a forma di stella sono la stessa forma ma dimensioni diverse, per cui è possibile creare una sola forma riposizionati e riutilizzati senza duplicati all'interno del file. Il formato consente di riutilizzare un glifo completo all'interno di uno nuovo, senza doverli riutilizzare codificano le stesse forme per ogni glifo. Immagina un carattere di colore decorativo con decorazioni floreali, con le stesse forme di fiori su lettere diverse facendo riferimento ai glifi colorati esistenti. Per il caso d'uso dei caratteri web, COLRv1 si comprime bene sotto woff2. Ad esempio, una build di test di Twemoji utilizzando COLRv1 richiede circa 1,2 MB gonfiato, ma è di circa 0,6 MB in forma woff2. Una build del Il set completo di Noto Emoji Glyph è ridotto da 9 MB per la versione bitmap a 1,85 MB in formato COLRv1+woff2.
Casi d'uso dei caratteri a colori
Titoli accattivanti
Un nuovo carattere a colori mette in risalto le immagini, i titoli e i banner che risaltano fuori.
Niente più sostituzioni dell'immagine: caratteri emoji
Se supporti contenuti generati dagli utenti, è probabile che questi utilizzino le emoji. Oggi è pratica comune scansionare il testo e sostituire le emoji incontrate con immagini per garantire un rendering multipiattaforma coerente e la possibilità di supportare più emoji di quelle supportate dal sistema operativo. Queste immagini devono quindi essere convertite in testo durante le operazioni relative agli appunti. Ecco un esempio reale:
Se disponi di un carattere emoji, esegui il rendering del 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 di reazione con emoji, COLRv1 offre l'opportunità 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'uso del colore nei caratteri delle icone aggiunge chiarezza e rende i glifi più facili da comprendere.
Espressione artistica
I caratteri colorati a basso spazio consentono nuove forme di espressione artistica nel testo sul web. Questo esempio di carattere arabo in stile Kufi utilizza le sfumature di colore come un'interpretazione artistica di ciò che il flusso di inchiostro della calligrafia tradizionale applicata allo stile Kufi della scrittura araba, che ha origine perché non sono scritti con pennino e inchiostro, ma scolpiti nella pietra.
Rilevamento delle caratteristiche
Al momento, capire se un motore del browser supporta un colore specifico è possibile tramite lo sniffing dello user agent o cercando in libreria simile a ChromaCheck di @PixelAmbacht per testare il rendering dei colori glifi su Canvas. Entrambe le soluzioni non sono ottimali. I test delle funzionalità dovrebbero rilevare è una caratteristica specifica ed evita lo sniffing dello user agent. ChromaCheck non deve dover eseguire operazioni canvas 2D che richiedono molte risorse 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 di fornire informazioni sul supporto della tecnologia dei caratteri del browser in JavaScript e dichiarativamente nel CSS. Il team ha in programma di rilasciare un rilevamento efficiente delle funzionalità per caratteri di colore e altre tecnologie per i caratteri in una versione futura di Chrome.
Se desideri utilizzare i caratteri colorati nel tuo progetto adesso, quando COLRv1 l'assistenza è limitata a Chrome, puoi farlo in due modi: chiedi al tuo carattere per un carattere COLRv1 che contiene anche glifi monocromatici. User agent che non supportano COLRv1 ricorreranno al rendering monocromatico glifi. In alternativa, puoi utilizzare la libreria ChromaCheck o lo user agent per stabilire se è disponibile il supporto di COLRv1. Quindi invii CSS che carica i caratteri COLRv1 negli user agent di supporto e utilizza un tipo di carattere alternativo come COLRv0, un formato di carattere bitmap o SVG OpenType in altri browser.
Supporto della tavolozza di caratteri CSS
Sarebbe estremamente utile se l'utilizzo di una diversa serie di colori non fosse richiedono un nuovo carattere. Per fortuna esiste un meccanismo: proprietà CSS font-palette. La Il team di Chrome si sta adoperando per aggiungere supporto per la tavolozza dei caratteri in Chrome.
caratteri COLRv1 e tu
Se i caratteri COLRv1 hanno suscitato il tuo interesse, chiedi al tuo fornitore di caratteri di informazioni su un colore COLRv1. da utilizzare nel progetto, prova gli esempi e le demo di cui sopra o perché non approfondire e sperimentare crearne uno tuo?
Se hai feedback su COLRv1 in Chrome, pubblicalo nella mailing list blink-dev, oppure segnala un problema nel nostro Issue Tracker. Se hai feedback sul formato del carattere COLRv1, segnala un problema Repository GitHub delle specifiche COLRv1.
Con Chrome 98, siamo entusiasti di come COLRv1 offra un nuovo livello di creatività tipografica al web.
Scopri di più
Se ti interessa saperne di più, ecco un paio di altre risorse a tua disposizione:
Per scoprire come funziona COLRv1 e come è implementato in Chrome, guarda la conferenza sulla conferenza BlinkOn 15 di Dominik.
- International Unicode Conference #45: Vector Color Fonts, discorso di Roderick Foglietti, Peter Constable e Dominik Röttsches (video, dettagli della conversazione)
- compilatore di caratteri nanoemoji, producendo Caratteri COLRv1 da immagini SVG
- Google Fonts Repository GitHub di color-fonts contenente le build attuali di Noto Emoji, Twemoji e altri caratteri di esempio
- Presentazione del font Bradley Initials da DJR, esplorando COLRv1
- Strumento e libreria ChromaCheck per rilevare le tecnologie disponibili per i caratteri dei colori
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 per il loro contributo a COLRv1.