Share
Fiecare designer de web știe cum să stabilească culoarea unui font, nu? Este unul dintre primele lucruri pe care le facem când începem să învățăm CSS. Alegem o culoare, apoi folosim stiluri pentru ao seta, cum ar fi Culoarea albastra; sau culoare: violet;, astfel încât toate glifurile din fontul ales de noi să transforme acea culoare și numai acea culoare.
Dar dacă ați putea defini mai mult de o culoare pe fiecare glif? Dacă ai putea să-ți faci albastrele și purpuriu sau au gradiente care rulează între albastru și violet sau chiar au o jumătate de duzină de culori sau mai mult aplicate unei singure familii de fonturi?
Ei bine, odată cu apariția fonturilor de tip Open Type, poți să faci asta.
Check out această imagine a patru fonturi diferite de culoare:
Acest lucru ar putea arăta ca imagini fixe puse împreună în Illustrator, dar de fapt vă uitați la un text live, editabil, ușor de citit de către un motor de căutare într-un browser.
Mai degrabă decât având culoarea lor controlată prin CSS, aceste fonturi au informații interne care le permite să aibă mai multe culori per glif, făcând pentru un afișaj destul de izbitoare.
Fonturile de culoare sunt încă destul de noi, astfel încât nu a existat masiv numărul lor este lansat încă, iar printre cei disponibili există o combinație de fonturi gratuite și plătite. Pentru a vă asigura că puteți juca singuri cu fonturi de culori, am ales patru fonturi gratuite pentru demonstrația noastră. Puteți obține copii ale acestor fonturi în următoarele locații:
Codul folosit pentru a le adăuga la pagină nu este nimic nou, este doar vechi @ Font-face stii si iubesti:
Fonturi de culori Gilbert Color FontFont Abalone ColorPlaybox Culoare fontFontul Bixa Color
În acest moment, dacă doriți să încercați fonturi de culoare în browser, va trebui să utilizați Firefox sau Edge, singurele două browsere cu suport complet. Safari limitează suportul numai pentru formatul SBIX. Chrome are suport numai pe Android, apoi doar pentru formatul CBDT. Opera nu are deloc sprijin.
În prezent, nu putem folosi CSS pentru a schimba culorile care sunt utilizate într-un font de culoare. Cu toate acestea, este posibil ca un designer de fonturi să trimită un font cu un număr de variații presetate incluse. Aceste variații pot fi apoi modificate utilizând proprietatea font-feature-setări.
Putem vedea această funcționalitate în acțiune prin intermediul demo-ului Robin Rendle al fontului Trajan Color de la TypeKit.
Pe măsură ce culorile unui font de culoare sunt fixate în interiorul fontului în sine, culoare proprietatea pe care o aplicați în mod obișnuit textului dvs. nu va avea absolut nici un efect, inclusiv asupra legăturilor, indiferent de starea lor.
De asemenea, merită să fim conștienți de faptul că, deși nu se va produce nici o schimbare de culoare cu linkuri, acestea pot avea în continuare aplicația de decorare subliniată implicită, iar sublinierea voi primiți orice culoare specificați prin CSS. Dacă decideți să combinați fonturi de culori și linkuri, este posibil să fie folosită o astfel de subliniere pentru a ajuta utilizatorii să distingă linkurile de restul textului.
Iată câteva exemple de cod:
Fonturi de culori
Accentsconagua