Share
Elke webontwerper weet hoe de kleur van een lettertype moet worden ingesteld, toch? Het is een van de eerste dingen die we doen wanneer we CSS beginnen te leren. We kiezen een kleur, dan gebruiken we stijlen om het in te stellen, zoals kleur blauw; of kleur paars;, dus alle glyphs in ons gekozen lettertype veranderen die kleur, en enkel en alleen die kleur.
Maar wat als u meer dan één kleur per glyph zou kunnen definiëren? Stel dat u uw letters blauw zou kunnen maken en paars, of verlopen tussen blauw en paars, of hebben zelfs een zestal kleuren of meer toegepast op een enkele lettertypefamilie?
Welnu, met de opkomst van Open Type kleurenlettertypen, kunt u precies dat doen.
Bekijk deze afbeelding van vier verschillende kleurlettertypen:
Dit kan lijken op vaste afbeeldingen die in Illustrator zijn samengevoegd, maar je kijkt in feite naar live, bewerkbare, door zoekmachines leesbare tekst in een browser.
In plaats van dat hun kleur wordt bestuurd via CSS, hebben deze lettertypen interne informatie waarmee ze meerdere kleuren per glyph kunnen hebben, wat een mooi opvallend beeldscherm oplevert.
Kleurlettertypen zijn nog redelijk nieuw, dus er is geen a massief een aantal van hen zijn nog maar net vrijgegeven, en onder die die beschikbaar zijn is er een mix van gratis en betaalde lettertypen. Om ervoor te zorgen dat je zelf met kleurlettertypen kunt spelen, koos ik vier gratis lettertypen uit voor onze demo. U kunt kopieën van deze lettertypen kopiëren op de volgende locaties:
De code die werd gebruikt om ze aan de pagina toe te voegen, is niets nieuws, het is gewoon het oude @ Font-face je weet het en houdt van:
Kleurlettertypen Gilbert Color FontAbalone kleur lettertypeKleurvak van de PlayboxBixa Color Font
Op dit moment moet u, als u in de browser kleurlettertypen wilt uitproberen, Firefox of Edge gebruiken, de enige twee browsers met volledige ondersteuning. Safari beperkt alleen ondersteuning voor SBIX-indeling. Chrome heeft alleen ondersteuning op Android en dan alleen voor CBDT-indeling. Opera heeft helemaal geen ondersteuning.
Op dit moment kunnen we geen CSS gebruiken om de kleuren te wijzigen die in een kleurlettertype worden gebruikt. Het is echter mogelijk dat een lettertypeontwerper een lettertype verzendt met een aantal vooraf ingestelde variaties. Die variaties kunnen vervolgens worden aangepast met behulp van de eigenschap font-feature-instellingen.
We kunnen deze functionaliteit in actie zien via Robin Rendle's demo van het Trajan Color-lettertype van TypeKit.
Aangezien de kleuren van een kleurlettertype binnen het lettertype zelf zijn opgelost, is de kleur property die u gewoonlijk op uw tekst toepast, heeft absoluut geen effect, inclusief op links, ongeacht hun staat.
Het is ook de moeite waard om je ervan bewust te zijn dat hoewel er geen kleurverandering zal plaatsvinden met links, ze hun standaard onderstreepte tekstdecoratie wel kunnen toepassen, en dat de onderstreepte zullen ontvang elke kleur die u opgeeft via uw CSS. Als u besluit om kleurlettertypen en links te combineren, is het misschien de moeite waard om een dergelijke onderstreping te gebruiken om gebruikers te helpen onderscheid te maken tussen links en de rest van de tekst.
Hier is een voorbeeldcode:
Kleurlettertypen
Accentsconagua