Share
Ogni web designer sa come impostare il colore di un font, giusto? È una delle prime cose che facciamo quando iniziamo ad imparare i CSS. Scegliamo un colore, quindi usiamo gli stili per impostarlo, come colore blu; o colore viola;, quindi tutti i glifi del nostro font scelto cambiano quel colore, e solo quel colore.
Ma se potessi definire più di un colore per glifo? E se potessi rendere le tue lettere blu e viola, o hanno sfumature che corrono tra il blu e il viola, o hanno anche una mezza dozzina di colori o più applicati a una singola famiglia di font?
Bene, con l'emergere dei caratteri colore Open Type, puoi fare proprio questo.
Dai un'occhiata a questa immagine di quattro diversi caratteri di colore:
Questo potrebbe sembrare immagini fisse messe insieme in Illustrator, ma in realtà stai guardando testo leggibile, modificabile, motore di ricerca leggibile in un browser.
Piuttosto che avere il loro colore controllato tramite CSS, questi font hanno informazioni interne che consentono loro di avere più colori per glifo, creando un display piuttosto sorprendente.
I caratteri a colori sono ancora piuttosto nuovi quindi non è stato un massiccio molti di questi sono stati ancora rilasciati, e tra quelli disponibili c'è un mix di font gratuiti e a pagamento. Per assicurarti di poter giocare con i caratteri colore tu stesso, ho scelto quattro font gratuiti per la nostra demo. È possibile prendere copie di questi tipi di carattere nei seguenti percorsi:
Il codice utilizzato per aggiungerli alla pagina non è una novità, è solo il semplice vecchio @ Font-face conosci e ami:
Caratteri a colori Gilbert Color FontAbalone Color FontPlaybox Color FontBixa Color Font
In questo momento, se si desidera provare i caratteri a colori nel browser, è necessario utilizzare Firefox o Edge, gli unici due browser con supporto completo. Safari limita il supporto solo al formato SBIX. Chrome supporta solo Android e quindi solo per il formato CBDT. Opera non ha alcun supporto.
Al momento non possiamo usare i CSS per cambiare i colori usati all'interno di un font a colori. Tuttavia, è possibile per un designer di font spedire un font con un numero di variazioni preimpostate incluse. Quelle variazioni possono quindi essere modificate utilizzando la proprietà font-funzione-settings.
Possiamo vedere questa funzionalità in azione tramite la demo di Robin Rendle del font Trajan Color di TypeKit.
Poiché i colori di un font di colore sono fissi all'interno del font stesso, il colore la proprietà che di solito applichi al tuo testo non avrà assolutamente alcun effetto, inclusi i link, qualunque sia il loro stato.
Vale anche la pena di essere consapevoli del fatto che, mentre non si verificano cambiamenti di colore con i collegamenti, possono ancora applicare la loro decorazione di sottolineatura di default, e che la sottolineatura volontà ricevi qualsiasi colore specificato tramite il tuo CSS. Se si decide di combinare font e collegamenti a colori, potrebbe essere utile utilizzare tale sottolineatura per aiutare gli utenti a distinguere i collegamenti dal resto del testo.
Ecco alcuni esempi di codice:
Caratteri a colori
Accentsconagua