Kompakte, komprimierbare Farbvektorschriften mit allen Ihren Lieblingsschriftarten Farbverlaufs-Sorten.
In Chrome 98 haben die Chrome- und Fonts-Teams Unterstützung für COLRv1 hinzugefügt, eine Weiterentwicklung des Schriftformats COLRv0, mit der Farbschriften von vielen Hinzufügen von Farbverläufen, Zusammensetzen und Überblenden und verbesserte interne Wiederverwendung von Formen für gestochen scharfe und kompakte Schriftartdateien,
Jetzt färben
Im Web wird Text normalerweise in einer in CSS festgelegten Farbe gezeichnet. Die Schriftart
keine bestimmte Farbe definieren, sondern nur die Position der Pixel
platziert. Das ist in der Regel gut. Mit CSS kann der Autor flexibel ein
Farbe. Manchmal enthält eine Glyphe jedoch mehrere Farben, die zusammen
Bedeutung. Die Flagge 
mit hellblauen, rosa und weißen Streifen würde beispielsweise nicht
dieselbe Bedeutung haben, wenn sie einfach in der aktuellen Textfarbe gezeichnet wurde.
Heute sind für die meisten Nutzer Emojis die einzigen Farbschriftarten, die sie sehen. Emojis
erscheinen normalerweise im Web mithilfe der System-Emoji-Schriftart oder durch Einfügen von Bildern
die eine Zusatzfunktion hat: 
. Große Datei
insbesondere für bitmapbasierte Farbschriften,
erschweren die Nutzung von Web-Schriftarten,
Schriftarten für Emojis verwendet. Durch die Unterstützung von COLRv1 hoffen wir,
die im Web und darüber hinaus verwendet werden können.
Zeig mir deine Farben
Wir haben einige Beispiele zusammengestellt, mit denen Sie experimentieren können:
Die Beispiel-Assets aus Google Fonts, die im Beispiel verwendet wurden, sind in der Google Fonts Web API. Sie sind nicht im Verzeichnis unter fonts.google.com aufgeführt ist als Sie funktionieren nur unter Chrome 98 oder höher und zeigen experimentelle Arbeiten.
Sie können jetzt mit kostenlosen Open-Source-Tools eigene COLRv1-Schriftarten erstellen. Prüfen Nano-Emoji-Font Compiler mit der Sie COLRv1-Schriftarten aus SVG-Quellbildern erstellen und diese dann in Chrome 98 oder höher. Probiere Bungee Spice aus, indem du die Farbverlauf mithilfe von finden Sie in dieser Anleitung.
Sie können die Schriftart Bungee Spice beispielsweise so ändern, dass sie einen blauen und roten Farbverlauf erhält:
Twittern Sie Ihre Ergebnisse an @googlefonts. 🙂 Wie wäre es mit einem radialen oder „Erledigen“-Farbverlauf?
Neu bei COLRv1
Das Schriftartformat unterstützt mehrere Farben, alle mit unterschiedlichen Kompromisse ein, aber bisher war keines im Web erfolgreich. (Weitere Informationen zu den Vor- und Nachteilen sehen Sie sich den Vortrag von Dominik BlinkOn 15 an. Chrome 98 unterstützt COLRv1, eine Weiterentwicklung von COLRv0. Wir hoffen, dass Die Kombination aus Grafikfunktionen und kompakten Dateien macht COLRv1 zu einem gute Wahl für viele Anwendungsfälle mit Farbschriften. COLRv1 fügt Farbverläufe, Mischung und Zusammensetzung und verbessert Formen der internen Wiederverwendung, um noch kompaktere Dateien zu erstellen.
COLRv1 verfügt über eine Ausdrucksfähigkeit, die ungefähr SVG nativ oder Blending und Compositing wurde hinzugefügt. nach oben. Es gibt vier Arten von Farbfüllungen: Volltonfarben, lineare Farbverläufe, Radialfarben sowie Farbverläufe über die Funktion „Erledigen“ und „Conic“. Mit COLRv1 können Sie Position und Transformation Glyphenelemente mit einem vollständigen Satz von Symbolen zum Übersetzen, Drehen, Scheren und Skalieren Transformationen. Außerdem werden Schriftvariationen und die Wiederverwendung von Schriftarten unterstützt, vorhandene Formendefinitionsformate in der Schriftart enthalten.
Stellen Sie sich das Kristallkugel-Emoji als Beispiel vor: Die sternförmigen Spitzlichter sind dieselbe Form, aber unterschiedliche Größen haben, d. h., es kann nur eine Form neu positioniert und ohne Duplizierung innerhalb der Datei wiederverwendet. Das Format ermöglicht eine ganze Glyphe innerhalb einer neuen Glyphe wiederverwenden, ohne codieren Sie für jede Glyphe die gleichen Formen. Stellen Sie sich eine dekorative Farbschrift mit Blumenschmuck, bei denen die gleichen Blumenformen auf verschiedene Buchstaben gesetzt werden indem Sie einfach auf vorhandene Farbglyphen verweisen. Für den Anwendungsfall „Webschriftart“: COLRv1 und die Kompresse sind gut unter WOFF2. Beispiel: Ein Test-Build von Twemoji mit COLRv1 dauert etwa 1,2 MB aufgebläht, in WOFF2-Form aber nur etwa 0,6 MB. Eine Version des Das vollständige Noto-Emoji-Glyph-Set wurde von 9 MB für die Bitmap-Version auf 1,85 MB reduziert in Form von COLRv1+woff2.
<ph type="x-smartling-placeholder">
Anwendungsfälle für farbige Schriftarten
Eingängige Schlagzeilen
Die Schriftart in einer neuen Farbe hebt visuelle Highlights, Anzeigentitel und Banner hervor. aus.
Kein Bildersatz mehr: Emoji-Schriftarten
Wenn Sie von Nutzern erstellte Inhalte unterstützen, verwenden Ihre Nutzer wahrscheinlich Emojis. Heute es ist üblich, Text zu scannen und Emojis durch Bilder zu ersetzen, um ein konsistentes plattformübergreifendes Rendering und die Unterstützung neuerer als das Betriebssystem unterstützt. Diese Bilder müssen dann wieder in Text umgewandelt werden. während der Zwischenablage öffnen. Hier ist ein Beispiel aus der Praxis:
<ph type="x-smartling-placeholder">
Wenn Sie eine Emoji-Schriftart haben, rendern Sie 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 einer Emoji-Reaktionskomponente bietet COLRv1 ebenfalls die Möglichkeit, eine kompakte Schriftartdatei anstelle eines Katalogs mit Bild-Assets.
Stellen Sie sich vor, wie viele Bilder Sie bräuchten, um eine vollständige Emoji-Auswahl zu erhalten!
Farbe in Symbolschriftarten
Die Verwendung von Farben in Symbolschriftarten sorgt für mehr Klarheit und macht Glyphen leichter zu verstehen.
Künstlerischer Ausdruck
Platzsparende Farbschriftarten ermöglichen neue Formen des künstlerischen Ausdrucks in Texten auf im Web. In diesem Beispiel für eine arabische Schriftart im Kufi-Stil werden Farbverläufe als Interpretation dessen, was der Tintenfluss traditioneller Kalligrafie auf den Kufi-Stil der arabischen Schrift angewendet, der nicht mit Schreibfeder und Tinte, sondern in Stein gemeißelt.
Funktionserkennung
Derzeit herauszufinden, ob eine Browser-Engine eine bestimmte Farbe unterstützt mithilfe eines User-Agent-Sniffings oder einer Suche in einem ChromaCheck von @PixelAmbacht zum Testen des Farb-Renderings Glyphen auf Canvas. Beide Lösungen sind nicht optimal. Funktionstests sollen erkennen, nur eine bestimmte Funktion selbst testen und das User-Agent-Sniffing zu vermeiden. ChromaCheck keine ressourcenintensiven 2D-Canvas-Vorgänge für für die Entscheidungsfindung.
Das Chrome-Team möchte dies verbessern und hat daher eine Reihe von [1 2] in der Preisvergleichsportal-Arbeitsgruppe Informationen zur Unterstützung von Browserschriftarten in JavaScript und deklarativ in CSS. Das Team plant, eine effiziente Funktionserkennung für Farbschrift und andere Schrifttechnologien in einer zukünftigen Version von Chrome.
Wenn Sie in Ihrem Projekt jetzt farbige Schriftarten verwenden möchten, wenn COLRv1 nicht auf Chrome beschränkt ist, gibt es zwei Möglichkeiten, das zu tun: Fragen Sie nach Anbieter einer COLRv1-Schriftart, die auch einfarbige Glyphen enthält. User-Agents, die keine COLRv1 unterstützen, rendert monochrome Bilder Glyphen zu erhalten. Alternativ können Sie die ChromaCheck-Bibliothek oder den User-Agent verwenden Prüfen, ob COLRv1-Unterstützung verfügbar ist. Anschließend stellen Sie CSS zum Laden von COLRv1-Schriftarten in unterstützenden User-Agents und Verwendung einer alternativen Schriftart wie COLRv0, ein Bitmap-Schriftformat oder in anderen Browsern OpenType SVG.
Unterstützung von CSS-Schriftpaletten
Es wäre außerordentlich nützlich, wenn die Verwendung eines anderen Farbsatzes erfordert eine neue Schriftart. Glücklicherweise gibt es einen Mechanismus: CSS-Eigenschaft "font-palette" ein. Die Das Chrome-Team arbeitet daran, Unterstützung der Schriftpalette in Chrome.
COLRv1-Schriftarten und ich
Wenn COLRv1-Schriftarten Ihr Interesse wecken, fragen Sie Ihren Schriftartanbieter nach einer COLRv1-Farbe die Sie in Ihrem Projekt verwenden möchten, finden Sie in den Beispielen und Demos oder probieren Sie es einfach aus. Du bist ein eigener Creator?
Feedback zu COLRv1 in Chrome können Sie hier posten: Mailingliste für blink-dev oder melden Sie ein Problem in unserer Problemverfolgung. Wenn Sie Feedback geben möchten im COLRv1-Schriftformat selbst, melde das Problem GitHub-Repository zur COLRv1-Spezifikation.
Mit Chrome 98 bietet COLRv1 ein ganz neues typografischer Kreativität im Web gerecht zu werden.
Weitere Informationen
Wenn Sie an weiteren Informationen interessiert sind, haben wir einige weitere Ressourcen für Sie:
Um zu erfahren, wie COLRv1 funktioniert und in Chrome implementiert wird, schauen Sie sich Dominiks Konferenzvortrag BlinkOn 15 an.
- Internationale Unicode-Konferenz Nr. 45: Vector Color Fonts, Vortrag von Roderick Sheeter, Peter Constable und Dominik Röttsches (Video, Gesprächsdetails)
- Nano-Emoji-Font Compiler, bei dem verschiedene COLRv1-Schriftarten aus SVG-Bildern
- Google Fonts“ GitHub-Repository „color-fonts“ mit aktuellen Builds von Noto Emoji, Twemoji und anderen Beispielschriftarten
- DJRs Präsentation der Schriftart Bradley Initials und Erkundung von COLRv1
- ChromaCheck-Tool und -Bibliothek, Verfügbare Farbschrifttechnologien für die Funktionserkennung
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.