Kompakte, komprimierbare Farbvektorschriftarten mit allen Ihren Lieblingssorten für Farbverläufe.
In Chrome 98 haben die Chrome- und Fonts-Teams COLRv1 unterstützt. Dies ist eine Weiterentwicklung des COLRv0-Schriftartformats, durch die Farbverläufe durch das Hinzufügen von Farbverläufen sowie die Zusammenstellung und Verschmelzung verbreitet werden sollen. Außerdem wurde die Wiederverwendung interner Formen für gestochen scharfe und kompakte Schriftartendateien verbessert, die sich gut komprimieren lassen.
Jetzt färben
Im Web wird Text normalerweise in einer in CSS festgelegten Farbe gezeichnet. Die Schriftart definiert keine bestimmte Farbe, sondern gibt nur an, wo Pixel platziert werden sollen. Das ist in der Regel eine gute Sache. Mit CSS kann der Autor flexibel eine Farbe auswählen. Manchmal enthält eine Glyphe jedoch mehrere Farben, die zusammen eine Bedeutung haben. Das Flag 
mit hellblauen, rosa und weißen Streifen würde beispielsweise nicht dieselbe Bedeutung vermitteln, wenn es einfach in der aktuellen Textfarbe gezeichnet würde.
Heutzutage sind die meisten Nutzenden Emojis die einzigen Farbschriften, die sie sehen. Emojis werden normalerweise im Web über die Emoji-Schriftart des Systems oder über das Einfügen von Bildern angezeigt (was mit eigenen Komplikationen verbunden ist, 
). Große Dateigrößen, insbesondere für bitmapbasierte Farbschriften, erschweren die Verwendung von Webschriftarten für Emojis. Durch die Unterstützung von COLRv1 hoffen wir, dass die Verwendung kreativer Farbschriftarten im Web und darüber hinaus zunehmen wird.
Zeig mir deine Farben
Wir haben für Sie ein paar Beispiele erstellt:
Die im Beispiel verwendeten Google Fonts-Assets sind in der Google Fonts Web API verfügbar. Sie werden nicht im Verzeichnis unter fonts.google.com aufgeführt, da sie nur mit Chrome 98 oder höher funktionieren und experimentelle Arbeiten zeigen.
Sie können jetzt mit kostenlosen Open-Source-Tools eigene COLRv1-Schriftarten erstellen. Sehen Sie sich den Nanoemoji-Schrift-Compiler an, mit dem Sie COLRv1-Schriftarten aus SVG-Quellbildern erstellen können, und probieren Sie sie dann in Chrome 98 oder höher aus. Gestalten Sie Ihre eigene Version von Bungee Spice und ändern Sie die Farbverlaufsfarben anhand dieser Anleitung.
Beispielsweise können Sie die Schriftart Bungee Spice so ändern, dass ein blauer und roter Farbverlauf angezeigt wird:
Twittern Sie Ihre Ergebnisse an @googlefonts. 🙂 Es lohnt sich also, einen radialen oder einen Farbverlauf zu verwenden.
Neu bei COLRv1
Das Schriftformat unterstützt mehrere Möglichkeiten zur Farbunterstützung, alle mit unterschiedlichen Kompromissen, aber bisher ist im Web keines erfolgreich. (Weitere Informationen zu den Vor- und Nachteilen finden Sie im Konferenzgespräch BlinkOn 15 von Dominik.) Chrome 98 unterstützt COLRv1, eine Weiterentwicklung von COLRv0. Wir hoffen, dass COLRv1 durch die Kombination aus Grafikfunktionen und kompakten Dateien zu einer guten Wahl für viele Anwendungsfälle mit Farbschriften wird. COLRv1 fügt Farbverläufe, Kompositionierung und Überblendung hinzu und verbessert die Wiederverwendung interner Formen, um noch kompaktere Dateien zu erstellen.
COLRv1 hat eine Ausdrucksfähigkeit, die etwa SVG Native entspricht, wobei zusätzlich Mischung und Zusammensetzung hinzugefügt werden. Es gibt vier Arten von Farbfüllungen: einfarbige Farben, lineare Farbverläufe, radiale Farbverläufe und Farbverläufe (Sweep/Kegel). Mit COLRv1 können Sie Glyphenelemente mithilfe eines vollständigen Satzes von Umwandlungs-, Rotations-, schier- und Skalierungstransformationen neu positionieren und transformieren. Außerdem werden Schriftartvariationen unterstützt und vorhandene Formendefinitionsformate in der Schriftart werden wiederverwendet.
Stellen Sie sich das Kristallkugel-Emoji als Beispiel vor: Die sternförmigen Hervorhebungen haben die gleiche Form, aber unterschiedliche Größen. Das bedeutet, dass nur eine Form neu positioniert und ohne Duplikat innerhalb der Datei wiederverwendet werden kann. Mit diesem Format können Sie eine vollständige Glyphe innerhalb einer neuen Glyphe wiederverwenden, ohne für jede Glyphe redundant die gleiche Form codieren zu müssen. Stellen Sie sich eine dekorative Farbschrift mit Blumendekorationen vor, bei der die gleichen Blumenformen auf verschiedenen Buchstaben platziert werden, indem nur auf vorhandene Farbglyphen verwiesen wird. Für Webfont-Anwendungsfall komprimiert COLRv1 gut unter woff2. Ein Test-Build von Twemoji mit COLRv1 nimmt beispielsweise 1,2 MB (aufgebläht) auf, hat aber eine Größe von etwa 0,6 MB in Woff2-Form. Ein Build des vollständigen Satzes von Noto Emoji-Glyphen wurde von 9 MB für die Bitmapversion auf 1,85 MB in COLRv1+woff2 reduziert.
Anwendungsfälle für Farbschrift
Eingängige Schlagzeilen
Eine neue Schriftart sorgt dafür, dass visuelle Hervorhebungen, Überschriften und Banner deutlich herausfallen.
Kein Bildersatz mehr: Emoji-Schriftarten
Wenn Sie von Nutzern erstellte Inhalte unterstützen, verwenden Ihre Nutzer wahrscheinlich Emojis. Heutzutage ist es üblich, Text zu scannen und alle Emojis durch Bilder zu ersetzen, um ein einheitliches plattformübergreifendes Rendering zu gewährleisten und die Fähigkeit, neuere Emojis zu unterstützen, als das Betriebssystem unterstützt. Diese Bilder müssen dann während der Zwischenablage zurück in Text umgewandelt werden. Hier ein reales Beispiel:
Wenn Sie eine Emoji-Schriftart haben, rendern Sie einfach den Text in der Schriftart wie folgt:
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
In ähnlicher Weise bietet COLRv1 in einer Emoji-Reaktionskomponente die Möglichkeit, eine kompakte Schriftartdatei anstelle eines Katalogs von Bild-Assets zu verwenden.
Stell dir vor, wie viele Bilder du für eine vollständige Emoji-Auswahl abrufen müsstest.
Farbe in Symbolschriftarten
Die Verwendung von Farben in Symbolschriften sorgt für mehr Klarheit und erleichtert das Verständnis der Glyphen.
Künstlerischer Ausdruck
Raumsparende Farbschriftarten ermöglichen im Web neue künstlerische Ausdrucksformen. In diesem Beispiel für eine arabische Schriftart im Kufi-Stil werden Farbverläufe als künstlerische Interpretation des Tintenflusses traditioneller Kalligrafie verwendet, wenn sie auf den Kufi-Stil der arabischen Schrift angewandt wird, die nicht mit Feder und Tinte geschrieben, sondern in Stein gemeißelt wurde.
Funktionserkennung
Derzeit kann durch User-Agent-Sniffing oder durch Suchen in einer Bibliothek wie ChromaCheck von @PixelAmbacht herausfinden, ob eine Browser-Engine ein bestimmtes Farbschriftformat unterstützt, um das Rendern von Farbglyphen auf Canvas zu testen. Beide Lösungen sind nicht optimal. Beim Funktionstest sollte nur eine bestimmte Funktion selbst erkannt und das User-Agent-Sniffing vermieden werden. Die ChromaCheck-Bibliothek sollte zur Ermittlung der Unterstützung keine ressourcenintensiven 2D-Canvas-Vorgänge ausführen müssen.
Das Chrome-Team möchte das verbessern und hat eine Reihe von Diskussionen [1, 2] in der CSS-Arbeitsgruppe gestartet, um Informationen zur Unterstützung der Browserschrifttechnologie in JavaScript und deklarativ in CSS bereitzustellen. Das Team plant, in einer zukünftigen Version von Chrome eine effiziente Funktionserkennung für Farbschrift und andere Schriftartentechnologien zu veröffentlichen.
Wenn Sie in Ihrem Projekt Farbschriften verwenden möchten, wenn COLRv1 nur in Chrome unterstützt wird, haben Sie zwei Möglichkeiten: Fragen Sie Ihren Schriftartanbieter nach einer COLRv1-Schriftart, die auch monochrome Glyphen enthält. User-Agents, die COLRv1 nicht unterstützen, greifen auf monochrome Glyphen zurück. Alternativ können Sie die ChromaCheck-Bibliothek oder das User-Agent-Sniffing verwenden, um festzustellen, ob COLRv1-Unterstützung verfügbar ist. Anschließend stellen Sie CSS bereit, das COLRv1-Schriftarten in unterstützende User-Agents lädt, und verwendet ein alternatives Schriftformat wie COLRv0, ein Bitmap-Schriftartformat oder OpenType SVG in anderen Browsern.
Unterstützung für CSS-Schriftarten
Es wäre außerordentlich nützlich, wenn für die Verwendung eines anderen Farbsatzes keine neue Schriftart erforderlich wäre. Glücklicherweise gibt es dafür einen Mechanismus: die CSS-Eigenschaft "font-palette". Das Chrome-Team arbeitet derzeit daran, die Unterstützung für die Schriftpalette in Chrome hinzuzufügen.
COLRv1 Fonts & du
Wenn COLRv1-Schriftarten Ihr Interesse wecken, fragen Sie Ihren Schriftartanbieter nach einer COLRv1-Farbschrift, die Sie in Ihrem Projekt verwenden können, oder sehen Sie sich die Beispiele und Demos oben an. Oder probieren Sie gleich aus, eine eigene Schrift zu erstellen.
Wenn Sie Feedback zu COLRv1 in Chrome haben, posten Sie einen Beitrag in der Mailingliste blink-dev oder melden Sie ein Problem in unserem Issue Tracker. Wenn Sie Feedback zum COLRv1-Schriftartformat selbst haben, können Sie ein Problem im GitHub-Repository für die COLRv1-Spezifikation melden.
Mit Chrome 98 bietet COLRv1 ein ganz neues Level typografischer Kreativität im Web.
Weitere Informationen
Falls Sie sich eingehender informieren möchten, haben wir einige weitere Ressourcen für Sie:
Wenn Sie mehr darüber erfahren möchten, wie COLRv1 funktioniert und in Chrome implementiert wird, sehen Sie sich Dominiks Vortrag auf der Konferenz „BlinkOn 15“ an.
- International Unicode Conference Nr. 45: Vector Color Fonts, Vortrag von Roderick Sheeter, Peter Constable und Dominik Röttsches (Video, Gesprächsdetails)
- nanoemoji Font Compiler zum Erstellen von CORv1-Schriftarten aus SVG-Bildern
- Das GitHub-Repository für Farben von Google Fonts mit aktuellen Builds von Noto Emoji, Twemoji und anderen Beispielschriftarten
- DJR-Schaufenster für die Schriftart Bradley Initials mit Informationen zu COLRv1
- ChromaCheck-Tool und -Bibliothek zur Funktionserkennung verfügbarer Farbschrifttechnologien
Danksagungen
Vielen Dank an Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens und andere für ihre Beiträge bei COLR1.