Share
Jeder Webdesigner weiß, wie er die Farbe einer Schrift einstellt, oder? Es ist eines der ersten Dinge, die wir tun, wenn wir anfangen, CSS zu lernen. Wir wählen eine Farbe aus, dann setzen wir Stile ein, z Farbe blau; oder Farbe lila;, so dass alle Glyphen in unserer gewählten Schriftart diese Farbe annehmen und nur diese Farbe.
Aber was wäre, wenn Sie mehr als eine Farbe pro Glyphe definieren könnten? Was wäre, wenn Sie Ihre Buchstaben blau machen könnten? und violett oder Farbverläufe zwischen blau und violett oder sogar ein halbes Dutzend Farben oder mehr für eine einzelne Schriftfamilie?
Nun, mit dem Aufkommen von Open Type-Farbschriften können Sie genau das tun.
Schauen Sie sich dieses Bild mit vier verschiedenen Farbschriften an:
Das sieht zwar so aus, als würden in Illustrator festgelegte Bilder zusammengefügt, aber Sie betrachten tatsächlich bearbeitbaren, von Suchmaschinen lesbaren Text in einem Browser.
Anstatt ihre Farbe über CSS steuern zu lassen, verfügen diese Schriftarten über interne Informationen, die es ihnen ermöglichen, mehrere Farben pro Glyphe zu verwenden, was zu einer ziemlich auffälligen Darstellung führt.
Farbschriften sind noch recht neu, so dass es noch keine gab massiv eine Anzahl von ihnen wurde gerade veröffentlicht, und unter den verfügbaren gibt es eine Mischung aus kostenlosen und kostenpflichtigen Schriften. Um sicherzugehen, dass Sie selbst mit Farbschriftarten herumspielen können, habe ich vier kostenlose Schriftarten für unsere Demo ausgewählt. Sie können Kopien dieser Schriftarten an folgenden Stellen abrufen:
Der Code, mit dem sie zur Seite hinzugefügt werden, ist nichts Neues, es ist nur der alte Code @Schriftart du kennst und liebst:
Farbschriften Gilbert-FarbschriftAbalone-FarbschriftPlaybox-FarbschriftBixa-Farbschrift
Wenn Sie jetzt im Browser Farbschriftarten ausprobieren möchten, müssen Sie entweder Firefox oder Edge verwenden, den einzigen Browser mit voller Unterstützung. Die Unterstützung von Safari beschränkt sich nur auf das SBIX-Format. Chrome bietet nur Unterstützung für Android und dann nur für das CBDT-Format. Opera hat überhaupt keine Unterstützung.
Im Moment können wir CSS nicht verwenden, um die Farben zu ändern, die in einer Farbschrift verwendet werden. Es ist jedoch für einen Schriftdesigner möglich, eine Schrift mit einer Reihe von voreingestellten Variationen auszuliefern. Diese Variationen können dann mithilfe der Eigenschaft geändert werden Font-Feature-Einstellungen.
Wir können diese Funktionalität in Aktion durch Robin Rendles Demo der Schriftart Trajan Color von TypeKit sehen.
Da die Farben einer Farbschriftart in der Schrift selbst festgelegt sind, wird die Farbe Eigenschaften, die Sie normalerweise für Ihren Text verwenden, haben keinerlei Auswirkungen auf Links, egal in welchem Zustand.
Es ist auch zu beachten, dass bei Links zwar keine Farbänderung auftritt, die Standard-Textverzierung der Unterstriche jedoch angewendet werden kann und dass die Unterstriche unterstrichen werden werden erhalten Sie eine beliebige Farbe, die Sie durch Ihr CSS angeben. Wenn Sie sich für die Kombination von Farbschriften und Links entscheiden, empfiehlt es sich möglicherweise, eine solche Unterstreichung zu verwenden, um Benutzern zu helfen, Links vom Rest des Textes zu unterscheiden.
Hier ist ein Beispielcode:
Farbschriften
Accentsconagua