Kompakte, komprimierungsfreundliche Farbvektorschriftarten mit allen Ihren bevorzugten Farbverläufen.
In Chrome 98 haben die Chrome- und Schriftartenteams Unterstützung für COLRv1 hinzugefügt. Dieses Format ist eine Weiterentwicklung des COLRv0-Schriftartformats und soll Farbschriftarten durch Hinzufügen von Verläufen, Compositing und Blending sowie einer verbesserten internen Wiederverwendung von Formen für scharfe und kompakte Schriftartdateien, die sich gut komprimieren lassen, weit verbreiten.
Jetzt kolorieren
Im Web wird Text in der Regel in einer Farbe dargestellt, die in CSS angegeben ist. In der Schriftart wird keine bestimmte Farbe definiert, sondern nur angegeben, wo Pixel platziert werden sollen. Das ist in der Regel gut. Mit CSS kann der Autor flexibel eine Farbe auswählen. Manchmal enthält ein Glyphe jedoch mehrere Farben, die zusammen eine Bedeutung haben. Beispielsweise würde diese Flagge 
mit hellblauen, rosa und weißen Streifen nicht dieselbe Bedeutung haben, wenn sie einfach in der aktuellen Textfarbe gezeichnet würde.
Für die meisten Nutzer sind Emojis die einzigen Farb-Schriftarten, die sie sehen. Emojis werden im Web in der Regel über die System-Emoji-Schriftart oder durch Einfügen von Bildern angezeigt (was eigene Probleme mit sich bringt, 
). Große Dateigrößen, insbesondere bei Bitmap-basierten Farbschriften, haben die Verwendung von Webfonts für Emojis erschwert. Wir hoffen, dass durch die Unterstützung von COLRv1 die Verwendung kreativer Farbschriftarten im Web und darüber hinaus zunimmt.
Sie können jetzt Ihre eigenen COLRv1-Schriftarten mit kostenlosen Open-Source-Tools erstellen. Mit dem Nanoemoji-Schriftarten-Compiler können Sie COLRv1-Schriftarten aus SVG-Quellbildern erstellen. Testen Sie sie dann in Chrome 98 oder höher. Du kannst auch deine eigene Version von Bungee Spice erstellen, indem du die Farben des Verlaufs änderst. Hier findest du eine Anleitung dazu.
Sie können beispielsweise die Schriftart „Bungee Spice“ so ändern, dass sie einen blauen und roten Farbverlauf hat:
Teile deine Ergebnisse auf Twitter mit @googlefonts 🙂 Vielleicht möchtest du einen radialen oder kreisförmigen Farbverlauf ausprobieren.
Neu bei COLRv1
Das Schriftformat unterstützt mehrere Möglichkeiten, Farbe zu unterstützen, alle mit unterschiedlichen Kompromissen – aber keine war bisher im Web erfolgreich. Weitere Informationen zu den Kompromissen finden Sie in Dominiks Vortrag auf der BlinkOn 15-Konferenz. In Chrome 98 wird COLRv1 unterstützt, eine Weiterentwicklung von COLRv0. Wir hoffen, dass die Kombination aus grafischen Funktionen und kompakten Dateien von COLRv1 es zu einer guten Wahl für viele Anwendungsfälle von Farbschriftarten macht. COLRv1 bietet Verläufe, Compositing und Blending und verbessert die interne Wiederverwendung von Formen, um noch kompaktere Dateien zu erstellen.
COLRv1 bietet in etwa die gleichen Ausdrucksmöglichkeiten wie SVG Native plus Blending und Compositing. Es gibt vier Arten von Farbfüllungen: Volltonfarben, lineare Farbverläufe, radiale Farbverläufe und Sweep-/konische Farbverläufe. Mit COLRv1 können Sie Glyphenelemente mithilfe einer vollständigen Reihe von Transformationsbefehlen für Verschieben, Drehen, Scheren und Skalieren neu positionieren und transformieren. Außerdem werden Schriftvariationen unterstützt und vorhandene Formdefinitionsformate in der Schriftart wiederverwendet.
Das Kristallkugel-Emoji ist ein gutes Beispiel: Die sternförmigen Highlights haben alle die gleiche 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 Glyphe in einem neuen Glyphe wiederverwenden, ohne die gleichen Formen für jedes Glyphe redundant codieren zu müssen. Stellen Sie sich eine dekorative Farbschriftart mit floralen Verzierungen vor, bei der dieselben Blumenformen auf verschiedenen Buchstaben platziert werden, indem einfach auf vorhandene Farb-Glyphen verwiesen wird. Für den Anwendungsfall „Webschriftart“ lässt sich COLRv1 gut mit woff2 komprimieren. Eine Testversion von Twemoji mit COLRv1 ist beispielsweise etwa 1,2 MB groß, aber nur etwa 0,6 MB im WOFF2-Format. Ein Build des vollständigen Noto Emoji-Glyphensatzes wurde von 9 MB für die Bitmap-Version auf 1,85 MB im COLRv1+woff2-Format reduziert.
Anwendungsfälle für Farbschriften
Kein Bildersatz mehr: Emoji-Schriftarten
Wenn Sie nutzergenerierte Inhalte unterstützen, verwenden Ihre Nutzer wahrscheinlich Emojis. Heutzutage ist es sehr üblich, Text zu scannen und alle gefundenen Emojis durch Bilder zu ersetzen, um eine plattformübergreifende Darstellung zu gewährleisten und neuere Emojis zu unterstützen, als das Betriebssystem unterstützt. Diese Bilder müssen dann bei Zwischenablagevorgängen wieder in Text umgewandelt werden. Hier ein Beispiel aus der Praxis:
Wenn Sie eine Emoji-Schriftart haben, rendern Sie den Text einfach in der Schriftart:
<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 die Möglichkeit, eine kompakte Schriftartdatei anstelle eines Katalogs von Bild-Assets zu verwenden.
Stellen Sie sich vor, wie viele Bilder Sie für eine vollständige Emoji-Auswahl abrufen müssten.
Farbe in Symbolschriftarten
Durch die Verwendung von Farben in Symbolschriftarten wird die Übersichtlichkeit erhöht und Glyphen sind leichter verständlich.
Künstlerischer Ausdruck
Platzsparende Farb-Schriftarten ermöglichen neue Formen des künstlerischen Ausdrucks in Texten im Web. In diesem Beispiel einer arabischen 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 angewendet wird. Dieser Stil entstand, weil die Schrift nicht mit Feder und Tinte geschrieben, sondern in Stein gemeißelt wurde.
Funktionserkennung
Derzeit ist es möglich, herauszufinden, ob eine Browser-Engine ein bestimmtes Farb-Schriftformat unterstützt, indem Sie den User-Agent-String analysieren oder in einer Bibliothek wie ChromaCheck von @PixelAmbacht nach der Darstellung von Farb-Glyphen auf Canvas suchen. Beide Lösungen sind nicht optimal. Beim Funktionstest sollte nur eine bestimmte Funktion erkannt werden. User-Agent-Sniffing sollte vermieden werden. Die ChromaCheck-Bibliothek sollte keine ressourcenintensiven 2D-Canvas-Vorgänge ausführen müssen, um die Unterstützung zu ermitteln.
Das Chrome-Team möchte dies verbessern und hat eine Reihe von Diskussionen[1, 2] in der CSS-Arbeitsgruppe gestartet, um Informationen zur Unterstützung von Browser-Schriftarttechnologien in JavaScript und deklarativ in CSS bereitzustellen. Das Team plant, in einer zukünftigen Version von Chrome eine effiziente Erkennung von Funktionen für Farbschriftarten und andere Schriftarttechnologien zu veröffentlichen.
Wenn Sie jetzt schon Farbschriftarten in Ihrem Projekt verwenden möchten, obwohl die Unterstützung von COLRv1 auf Chrome beschränkt ist, haben Sie zwei Möglichkeiten: Bitten Sie Ihren Schriftartenanbieter um eine COLRv1-Schriftart, die auch monochrome Glyphen enthält. User-Agents, die COLRv1 nicht unterstützen, greifen auf das Rendern von monochromen Glyphen zurück. Alternativ können Sie die ChromaCheck-Bibliothek oder die User-Agent-Erkennung verwenden, um festzustellen, ob COLRv1 unterstützt wird. Anschließend stellen Sie CSS bereit, das COLRv1-Schriftarten in unterstützten User-Agents lädt, und verwenden in anderen Browsern ein alternatives Schriftartformat wie COLRv0, ein Bitmap-Schriftartformat oder OpenType SVG.
Unterstützung von CSS-Schriftartpaletten
Es wäre sehr hilfreich, wenn für die Verwendung eines anderen Farbsatzes keine neue Schriftart erforderlich wäre. Glücklicherweise gibt es einen Mechanismus: die CSS-Eigenschaft „font-palette“. Das Chrome-Team arbeitet daran, Unterstützung für Schriftartenpaletten in Chrome hinzuzufügen.
COLRv1-Schriftarten
Wenn Sie sich für COLRv1-Schriftarten interessieren, fragen Sie Ihren Schriftartenanbieter nach einer COLRv1-Farbschriftart für Ihr Projekt, probieren Sie die Beispiele und Demos oben aus oder erstellen Sie Ihre eigene.
Wenn Sie Feedback zu COLRv1 in Chrome haben, posten Sie es in der blink-dev-Mailingliste oder melden Sie ein Problem in unserem Issue Tracker. Wenn Sie Feedback zum COLRv1-Schriftformat selbst haben, erstellen Sie ein Problem im GitHub-Repository für die COLRv1-Spezifikation.
Mit Chrome 98 freuen wir uns darauf, wie COLRv1 dem Web ein ganz neues Maß an typografischer Kreativität verleiht.
Weitere Informationen
Weitere Informationen finden Sie in den folgenden Ressourcen:
Weitere Informationen zur Funktionsweise von COLRv1 und zur Implementierung in Chrome finden Sie im Vortrag von Dominik auf der BlinkOn 15-Konferenz.
- International Unicode Conference #45: Vector Color Fonts, Vortrag von Roderick Sheeter, Peter Constable und Dominik Röttsches (Video, Vortragsdetails)
- nanoemoji-Schriftart-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 Schriftarten
- DJR-Showcase der Schriftart Bradley Initials, in dem COLRv1 untersucht wird
- ChromaCheck-Tool und ‑Bibliothek zur Erkennung verfügbarer Farbfonttechnologien
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.