Share
Hver webdesigner vet hvordan du setter en skrifttype farge, ikke sant? Det er en av de første tingene vi gjør når vi begynner å lære CSS. Vi velger en farge, så bruker vi stiler for å sette den, som farge: blå; eller farge: lilla;, slik at alle glyphs i vår valgte font gjør den fargen og bare den fargen.
Men hva om du kunne definere mer enn en farge per glyph? Hva om du kunne gjøre bokstavene dine blå og lilla, eller har gradienter som går mellom blå og lilla, eller til og med ha et halvt dusin farger eller mer brukt på en enkelt skriftfamilie?
Vel, med fremveksten av Open Type fargefonter, kan du bare gjøre det.
Sjekk ut dette bildet av fire forskjellige fargefonter:
Dette kan se ut som faste bilder satt sammen i Illustrator, men du ser faktisk på live, redigerbar, søkemotorlesbar tekst i en nettleser.
Snarere enn å ha fargekontrollen via CSS, har disse skriftene intern informasjon som gjør at de kan ha flere farger per glyph, noe som gjør det til en ganske slående skjerm.
Fargefonter er fortsatt ganske nye, så det har ikke vært en massiv Antallet utgitt ennå, og blant dem som er tilgjengelige, er det en blanding av gratis og betalte skrifter. For å sikre at du kan leke med fargeskrifter selv, har jeg valgt ut fire gratis skrifter for vår demo. Du kan ta kopier av disse skriftene på følgende steder:
Koden som brukes til å legge dem til siden er ikke noe nytt, det er bare vanlig gammel @ Font-face du vet og elsker:
Fargefonter Gilbert-fargeskriftAbalone fargeskriftPlaybox-fargeskriftBixa-fargeskrift
I øyeblikket, hvis du vil prøve ut fargeskrifter i nettleseren, må du bruke enten Firefox eller Edge, den eneste to nettleseren med full støtte. Safari begrenser bare støtte til SBIX-format. Chrome har bare støtte på Android, og deretter bare for CBDT-format. Opera har ingen støtte i det hele tatt.
For øyeblikket kan vi ikke bruke CSS til å endre fargene som brukes i en fargeskrift. Det er imidlertid mulig for en skriftdesigner å sende en skrifttype med en rekke forhåndsdefinerte variasjoner inkludert. Disse variasjonene kan da endres ved å bruke eiendommen font-funksjonsinnstillinger.
Vi kan se denne funksjonaliteten i handlingen via Robin Rendles demo av Trajan Colour skrift fra TypeKit.
Som fargene på en fargeskrift er festet inne i selve fonten, vil farge eiendom du vanligvis bruker på teksten din, har absolutt ingen effekt, inkludert på lenker, uansett deres tilstand.
Det er også verdt å være klar over at mens ingen fargeendring vil oppstå med koblinger, kan de fortsatt ha sin standard understreket tekstdekorasjon, og at understreken vil motta hvilken som helst farge du angir gjennom ditt CSS. Hvis du bestemmer deg for å kombinere fargefonter og koblinger, kan det være verdt å bruke en slik understreke for å hjelpe brukerne å skille lenker fra resten av teksten.
Her er noen eksempler på kode:
Fargefonter
Accentsconagua