Kompakte, komprimierbare Farbvektorschriften mit den von Ihnen bevorzugten Farbverläufen.
In Chrome 98 haben die Chrome- und Fonts-Teams die Unterstützung für COLRv1 hinzugefügt. Das ist eine Weiterentwicklung des Schriftformates COLRv0, mit dem farbige Schriftarten durch Hinzufügen von Farbverläufen, Komposition und Überblendung sowie verbesserter interner Formwiederverwendung für gestochen scharfe und kompakte Schriftdateien, die sich gut komprimieren lassen, weiter verbreitet werden sollen.
Jetzt färben
Im Web wird Text in der Regel in einer in CSS angegebenen Farbe dargestellt. 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. Diese Flagge 
mit hellblauen, rosafarbenen und weißen Streifen würde beispielsweise nicht dieselbe Bedeutung vermitteln, wenn sie einfach in der aktuellen Textfarbe gezeichnet würde.
Für die meisten Nutzer sind Emojis heute die einzigen farbigen Schriftarten, die sie sehen. Emojis werden im Web in der Regel über die System-Emoji-Schriftart oder durch Einfügen von Bildern angezeigt (was seine eigenen Komplikationen hat, 
). Große Dateigrößen, insbesondere bei bitmapbasierten Farbschriften, haben die Verwendung von Webschriften für Emojis erschwert. Wir hoffen, dass durch die Unterstützung von COLRv1 die Verwendung kreativer Farbschriften im Web und darüber hinaus zunehmen wird.
Zeig mir deine Farben
Wir haben einige Beispiele für Sie zusammengestellt:
Die im Beispiel verwendeten Beispiel-Assets von Google Fonts sind in der Google Fonts Web API verfügbar. Sie sind nicht im Verzeichnis unter fonts.google.com aufgeführt, da sie nur in Chrome 98 oder höher funktionieren und experimentelle Arbeit zeigen.
Sie können jetzt mit kostenlosen Open-Source-Tools eigene COLRv1-Schriftarten erstellen. Mit dem Nanoemoji-Schriftarten-Compiler können Sie COLRv1-Schriftarten aus SVG-Quellbildern erstellen und dann in Chrome 98 oder höher ausprobieren. Sie können Bungee Spice auch individuell gestalten, indem Sie die Farbverläufe mithilfe dieser Anleitung ändern.
Sie können beispielsweise die Schriftart „Bungee Spice“ so ändern, dass sie einen blau-roten Farbverlauf hat:
Twittern Sie Ihre Ergebnisse an @googlefonts. 🙂 Wie wäre es mit einem radialen oder „Erledigen“-Farbverlauf?
Neu in COLRv1
Das Schriftformat unterstützt mehrere Möglichkeiten zur Unterstützung von Farben, die alle mit unterschiedlichen Kompromissen eingehen. Im Web war jedoch bisher keines davon erfolgreich. Weitere Informationen zu den Vor- und Nachteilen finden Sie in Dominiks Vortrag auf der BlinkOn 15. Chrome 98 unterstützt COLRv1, eine Weiterentwicklung von COLRv0. Wir hoffen, dass COLRv1 mit seiner Kombination aus Grafikfunktionen und kompakten Dateien zu einer guten Wahl für viele Anwendungsfälle mit Farbschriften wird. COLRv1 bietet Farbverläufe, Compositing und Überblendungen und verbessert die interne Wiederverwendung von Formen, um noch kompaktere Dateien zu erstellen.
COLRv1 bietet etwa die gleichen Ausdrucksmöglichkeiten wie SVG Native, zusätzlich zu Misch- und Kompositionsfunktionen. Es gibt vier Arten von Farbfüllungen: Volltonfarben, lineare Farbverläufe, radiale Farbverläufe und Sweep-/Conic-Verläufe. Mit COLRv1 können Sie Schriftzeichenelemente mithilfe einer vollständigen Reihe von Verschiebungs-, Dreh-, Schräg- und Skalierungstransformationen neu positionieren und transformieren. Außerdem unterstützt es Schriftartenvarianten und verwendet vorhandene Formate für die Formdefinition in der Schriftart.
Stellen Sie sich das Kristallkugel-Emoji als Beispiel vor: Die sternförmigen Highlights haben die gleiche Form, aber unterschiedliche Größen. Das bedeutet, dass nur eine Form neu positioniert und wiederverwendet werden kann, ohne sie in der Datei zu duplizieren. Mit diesem Format können Sie ein vollständiges Schriftzeichen in einem neuen Schriftzeichen wiederverwenden, ohne dieselben Formen für jedes Schriftzeichen redundant codieren zu müssen. Stellen Sie sich eine dekorative Farbschriftart mit floralen Verzierungen vor, bei der dieselben Blütenformen auf verschiedene Buchstaben platziert werden, indem einfach auf vorhandene Farbsymbole verwiesen wird. Für den Anwendungsfall von Webschriften lässt sich COLRv1 mit WOFF2 gut komprimieren. Ein Testbuild von Twemoji mit COLRv1 benötigt beispielsweise etwa 1,2 MB, wenn er aufgebläht ist, aber nur etwa 0,6 MB in WOFF2-Form. Eine Version des vollständigen Noto Emoji-Glyphsatzes wurde von 9 MB für die Bitmapversion auf 1,85 MB in COLRv1+woff2-Form reduziert.
Anwendungsfälle für farbige Schrift
Eingängige Anzeigentitel
Eine kräftige Farbe der Schrift lässt visuelle Highlights, Überschriften und Banner besonders hervorstechen.
Kein Bildersatz mehr: Emoji-Schriftarten
Wenn Sie von Nutzern erstellte Inhalte unterstützen, verwenden Ihre Nutzer wahrscheinlich Emojis. Heutzutage wird Text häufig gescannt und alle Emojis durch Bilder ersetzt, um ein einheitliches plattformübergreifendes Rendering zu ermöglichen und neuere Emojis zu unterstützen, als vom Betriebssystem unterstützt werden. Diese Bilder müssen dann bei Zwischenablage-Vorgängen wieder in Text umgewandelt werden. Hier ein praktisches Beispiel:
Wenn Sie eine Emoji-Schriftart haben, rendern Sie den Text einfach in der Schriftart, so:
<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 einer Emoji-Reaktionskomponente bietet COLRv1 ebenfalls die Möglichkeit, eine kompakte Schriftdatei anstelle eines Katalogs mit Bild-Assets zu verwenden.
Stellen Sie sich vor, wie viele Bilder Sie bräuchten, um eine vollständige Emoji-Auswahl zu erhalten.
Farbe in Symbolschriftarten
Die Verwendung von Farbe in Symbolschriften sorgt für Klarheit und erleichtert das Verständnis der Symbole.
Künstlerischer Ausdruck
Platzsparende Farbschriften ermöglichen neue Formen des künstlerischen Ausdrucks im Web. In diesem Beispiel einer arabischen Schrift im Kufi-Stil werden Farbverläufe als künstlerische Interpretation des Tintenflusses der traditionellen Kalligrafie verwendet, wenn sie auf den Kufi-Stil der arabischen Schrift angewendet wird. Dieser Stil stammt aus der Zeit, als die Schrift nicht mit Feder und Tinte geschrieben, sondern in Stein gemeißelt wurde.
Funktionserkennung
Derzeit können Sie herausfinden, ob eine Browser-Engine ein bestimmtes Farbschriftformat unterstützt, indem Sie den User-Agent sniffen oder in einer Bibliothek wie ChromaCheck von @PixelAmbacht nachsehen, um das Rendern von Farbglyphen auf Canvas zu testen. Beide Lösungen sind nicht optimal. Funktionstests sollten nur eine bestimmte Funktion selbst erkennen und ein User-Agent-Sniffing vermeiden. Die ChromaCheck-Bibliothek sollte keine ressourcenintensiven 2D-Canvas-Vorgänge zur Bestimmung der Unterstützung 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 von Browser-Schrifttechnologien in JavaScript und deklarativ in CSS bereitzustellen. Das Team plant, in einer zukünftigen Version von Chrome eine effiziente Funktionserkennung für farbige Schriftarten und andere Schrifttechnologien einzuführen.
Wenn Sie in Ihrem Projekt jetzt schon Farbschriften verwenden möchten, obwohl der COLRv1-Support auf Chrome beschränkt ist, haben Sie zwei Möglichkeiten: Fragen Sie Ihren Schriftanbieter nach einer COLRv1-Schrift, die auch monochrome Zeichen enthält. User-Agents, die COLRv1 nicht unterstützen, fallen auf das Rendern einfarbiger Zeichen 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 liefern Sie CSS, das COLRv1-Schriftarten in unterstützenden User-Agents lädt, und verwenden in anderen Browsern ein alternatives Schriftformat wie COLRv0, ein Bitmap-Schriftformat oder OpenType SVG.
Unterstützung von CSS-Schriftpaletten
Es wäre äußerst nützlich, wenn die Verwendung eines anderen Farbsatzes keine neue Schriftart erfordern würde. Glücklicherweise gibt es einen Mechanismus: die CSS-Eigenschaft „font-palette“. Das Chrome-Team arbeitet daran, die Unterstützung für die Schriftartenpalette in Chrome hinzuzufügen.
COLRv1-Schriftarten und Sie
Wenn COLRv1-Schriftarten auf Ihr Interesse stoßen, fragen Sie Ihren Schriftartanbieter nach einer COLRv1-Farbschrift, die Sie in Ihrem Projekt verwenden können. Probieren Sie die Beispiele und Demos oben aus oder probieren Sie eigene Schriftarten und Demos aus.
Wenn Sie Feedback zu COLRv1 in Chrome haben, können Sie es in der blink-dev-Mailingliste posten oder ein Problem in unserem Issue Tracker melden. Wenn Sie Feedback zum COLRv1-Schriftartformat selbst haben, können Sie ein Problem im GitHub-Repository der COLRv1-Spezifikation melden.
Mit Chrome 98 freuen wir uns, dass COLRv1 die typografische Kreativität im Web auf ein ganz neues Niveau hebt.
Weitere Informationen
Weitere Informationen finden Sie hier:
Weitere Informationen zur Funktionsweise und Implementierung von COLRv1 in Chrome finden Sie in Dominiks Vortrag auf der BlinkOn 15-Konferenz.
- Internationale Unicode-Konferenz 45: Vector Color Fonts, Vortrag von Roderick Sheeter, Peter Constable und Dominik Röttsches (Video, Details zum Vortrag)
- nanoemoji-Schriftarten-Compiler, der COLRv1-Schriftarten aus SVG-Bildern erstellt
- Das color-fonts GitHub-Repository von Google Fonts mit aktuellen Builds von Noto Emoji, Twemoji und anderen Beispielschriftarten.
- DJRs Showcase der Schriftart Bradley Initials mit COLRv1
- ChromaCheck-Tool und ‑Bibliothek zur Erkennung verfügbarer Farbschriftentechnologien
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 zu COLRv1.