In den letzten Wochen gab es viel Aufregung über Farbschriften. Adobe beschreibt die Technologie wie folgt
OpenType-SVG ist ein Schriftformat, bei dem ein OpenType-Schriftschnitt all seine oder nur einige seiner Glyphen als SVG (Scalable Vector Graphics) Kunstwerk darstellt. Dies ermöglicht die Anzeige von mehreren Farben und Verläufen in einem einzigen Glyphen. Aufgrund dieser Funktionen bezeichnen wir OpenType-SVG-Schriftschnitte auch als „Farbfonts“.
Im März schrieb Roel Nieskens über seine Erfahrungen beim Erstellen eines Farbfonts und beschrieb das Problem, das sie lösen wollen.
Typografie im Web ist einfarbig: Zeichen sind entweder schwarz oder rot, niemals schwarz und rot.
Mit einem Farbfont können Schriftgestalter nun mehrere Farben in die Glyphen selbst einbetten. Dann kann ein Webdesigner eine der verfügbaren Optionen mit der CSS-Eigenschaft font-variation-settings auswählen. Unten habe ich eine Demo erstellt, die zeigt, wie das mit Trajan Color funktioniert, einem neuen Font von Adobe, der jetzt mit Typekit erhältlich ist.
Sehen Sie, wie verschiedene Teile dieser Glyphen, ABC, verschiedene Farbtöne im Inneren haben?
Das bedeutet, dass Designer bei Emojis und Display-Typografie bald interessantere Auswahlmöglichkeiten haben werden. Derzeit ist die Browserunterstützung noch nicht so gut, aber Adobe hat auf der von Nick Sherman entworfenen Typekit-Seite allen einen Hinweis gegeben.
Die Browserunterstützung für Farbfonts entwickelt sich noch, ist aber in Firefox und Microsoft Edge (IE) vorhanden, und wir erwarten, dass weitere Browserhersteller das Format bald übernehmen werden. In Browsern, denen die Unterstützung für Farbfonts fehlt, werden sie auf normale monochrome Glyphen zurückfallen.
Ich denke, der letzte Punkt, wie Farbfonts zurückfallen, wurde am besten von Roel Nieskens veranschaulicht, was die perfekte, progressiv verbesserte Sache sein sollte, die in dieser Situation passieren könnte.
Hier sind einige Beispiele für Farbfonts, mit denen Sie heute experimentieren können:
Aber Vorsicht! Es gibt einige Probleme mit diesem Ansatz. Das größte Problem ist die Größe der Font-Datei in meiner obigen Demo: Sie beträgt insgesamt 593 KB. Obwohl, um ehrlich zu sein, wir in den meisten Projekten wahrscheinlich nicht jede Variation des Farbfonts laden müssen, was die Größe der ausgelieferten Font-Datei erheblich reduziert.
Zweitens scheint es nicht möglich zu sein, in CSS die verschiedenen Farben innerhalb eines Farbfonts zu ändern. So sind wir für eine Weile an die Stile gebunden, die Schriftgestalter für uns in den Font-Dateien selbst bereitstellen.
Unabhängig von diesen beiden Schwachstellen bin ich jedoch immer noch sehr begeistert von der Entstehung von Farbfonts und was das für die Typografie im Web bedeuten könnte. Ich kann mir vorstellen, dass insbesondere alte Holztypen-Stile dank dieses neuen Schriftformats wieder aufleben.
Schauen Sie sich unbedingt die Demo unten an (mit Firefox oder Edge), um den Farbfont-Effekt zu sehen.
Siehe den Stift Color fonts demo von Robin Rendle (@robinrendle) auf CodePen.
Juhu, mehr Augenweide, die wahrscheinlich einige legitime Anwendungen hat, aber hauptsächlich dazu verwendet wird, das Web schwieriger lesbar zu machen. Ähnlich wie das Blink-Tag. Ich bin sicher, es wird einige ordentliche Anwendungen geben.
Ich hoffe, dass bei der Verwendung visuelle Probleme berücksichtigt werden. Ich könnte mir vorstellen, dass diese Fonts Probleme für Menschen mit bestimmten Sehbehinderungen verursachen könnten. Etwa 10% der Bevölkerung haben irgendeine Form von Legasthenie, und mehrere Farben in denselben Buchstaben könnten einige dieser Probleme auslösen und die Erkennung von Buchstabenformen erschweren.
Die größeren Font-Dateigrößen stören mich nicht besonders, aber Webmaster, die diese größeren Fonts verwenden, tun uns allen einen Gefallen und stellen sicher, dass ihr Server so konfiguriert ist, dass er entsprechende Caching-Header sendet und angemessen reagiert, wenn der Browser das Etag sendet, um zu fragen, ob es sich geändert hat.
Gibt es eine Möglichkeit, die Unterstützung für Farbfonts mit
@supportszu erkennen? #LazyWebIch habe Ihre veröffentlichten Informationen vollständig gelesen. Ich habe einige nützliche Ideen von Ihnen erhalten. Als Webdesign-Unterstützer verstehe ich, wie Sie den Effekt der Schulentwicklung und die Verwaltung von Schülern managen. Folgen Sie weiterhin weiteren Informationen von Ihnen.