Kompakte, komprimierungsfreundliche Farbvektorschriften mit allen beliebten 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 ein Glyph 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.
Dein Leben, deine Farbe
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:
Tweeten Sie Ihre Ergebnisse an @googlefonts. 🙂 Probieren Sie doch mal einen radialen oder einen Farbverlauf mit Wischeffekt aus.
Neu in COLRv1
Das Schriftformat unterstützt mehrere Möglichkeiten zur Unterstützung von Farben, die alle unterschiedliche Vor- und Nachteile haben. Bisher hat sich jedoch keine davon im Web durchgesetzt. 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 die Kombination aus grafischen Funktionen und kompakten Dateien von COLRv1 für viele Anwendungsfälle von Farbschriften geeignet ist. 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 konische Farbverlä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.
Denken Sie zum Beispiel an das Emoji mit der Kristallkugel: Die sternförmigen Highlights haben dieselbe Form, aber unterschiedliche Größen. Das bedeutet, dass nur eine Form neu positioniert und ohne Duplizierung in der Datei wiederverwendet werden kann. 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 in aufgeblähter Form etwa 1,2 MB, in WOFF2-Form jedoch etwa 0,6 MB. 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 das Betriebssystem unterstützt. Diese Bilder müssen dann bei der Zwischenablage 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 für eine vollständige Emoji-Auswahl abrufen müssten!
Farbe in Symbolschriften
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 feststellen, 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. Bei Funktionstests sollte nur eine bestimmte Funktion erkannt werden und das User-Agent-Sniffing vermieden werden. 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 kannst du die ChromaCheck-Bibliothek oder das User-Agent-Sniffing verwenden, um festzustellen, ob COLRv1 unterstützt wird. 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 für CSS-Schriftpaletten
Es wäre sehr nützlich, wenn für eine andere Farbgebung nicht ein neuer Schriftschnitt erforderlich wäre. 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 Sie COLRv1-Schriftarten interessant finden, fragen Sie Ihren Schriftartenanbieter nach einer COLRv1-Farbschriftart, die Sie in Ihrem Projekt verwenden können. Sehen Sie sich die Beispiele und Demos oben an oder erstellen Sie Ihre eigene.
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-Schriftformat 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 GitHub-Repository „color-fonts“ von Google Fonts mit aktuellen Builds von Noto Emoji, Twemoji und anderen Beispielschriften
- 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.