Share
Varje webbdesigner vet hur man ställer in ett teckens färg, eller hur? Det är en av de första sakerna vi gör när vi börjar lära CSS. Vi väljer en färg, då använder vi stilar för att ställa in det, som färgen blå; eller färg: lila;, så alla glyfer i vår valda typsnitt vänder den färgen och endast den färgen.
Men vad händer om du kan definiera mer än en färg per glyph? Vad händer om du kan göra dina bokstäver blåa och lila eller har gradienter som körs mellan blått och lila, eller till och med ha ett halvt dussin färger eller mer applicerat på en enda teckensfamilj?
Tja, med uppkomsten av Open Type färgfonter kan du bara göra det.
Kolla in den här bilden av fyra olika färgfonter:
Det här kan se ut som fasta bilder i Illustrator, men du tittar faktiskt på live, redigerbar, läsbar text i sökmotorn i en webbläsare.
I stället för att ha sin färgkontrollerad via CSS, har dessa teckensnitt intern information som gör det möjligt för dem att ha flera färger per glyf, vilket ger en ganska slående bildskärm.
Färg typsnitt är fortfarande ganska nya så det har inte varit en massiv Antalet av dem släpptes just ännu, och bland dem som finns finns en blandning av fria och betalda teckensnitt. För att du kan leka med färgfonter själv valde jag ut fyra fria teckensnitt för vår demo. Du kan ta tag i kopior av dessa teckensnitt på följande platser:
Koden som används för att lägga till dem på sidan är inget nytt, det är bara slättet gammalt @ Font-face du vet och älskar:
Färgfonter Gilbert Colour FontAbalone-färgtecknadPlaybox FärgskrivetBixa-färgtecknad
I det ögonblicket, om du vill prova färgfonter i webbläsaren måste du använda antingen Firefox eller Edge, den enda två webbläsaren med fullt stöd. Safari begränsar endast stöd till SBIX-format. Chrome har stöd endast på Android, och sedan bara för CBDT-format. Opera har inget stöd alls.
För närvarande kan vi inte använda CSS för att ändra färgerna som används inom en färgfont. Det är dock möjligt för en typsnittskoncept att skicka ett teckensnitt med ett antal förinställda variationer som ingår. Dessa variationer kan sedan modifieras genom att använda fastigheten font-funktionsinställningar.
Vi kan se denna funktionalitet i funktion via Robin Rendles demo av Trajan Colour typsnittet från TypeKit.
Eftersom färgerna på en färgstilsort är fixade inuti teckensnittet själv, Färg egendom som du brukar ansöka om din text får absolut ingen effekt, inklusive på länkar, oavsett deras tillstånd.
Det är också värt att vara medveten om att ingen färgförändring kommer att uppstå med länkar, men de kan fortfarande ha sin standardunderstrykade textdekoration, och att underlaget kommer ta emot vilken färg du anger genom din CSS. Om du väljer att kombinera färgfonter och länkar, kan det vara värt att använda en sådan understruk tion för att hjälpa användare att skilja länkar från resten av texten.
Här är några exempelkod:
Färgfonter
Accentsconagua