紧凑、便于压缩的彩色矢量字体，以及您喜爱的所有渐变风格。
在 Chrome 98 中，Chrome 和 Fonts 团队增加了对 COLRv1 的支持，COLRv0 是 COLRv0 字体格式的演变版本，旨在通过添加渐变、合成和混合来扩大彩色字体的覆盖范围，并改进了内部形状重用功能，以用于压缩效果清晰的简洁字体文件。
立即着色
在 Web 上，文本通常按 CSS 中指定的颜色绘制。字体不会定义任何特定颜色，而只是指明像素应放置的位置。这通常是一件好事。CSS 让作者可以灵活选择颜色。不过，有时字形包含多个颜色，这些颜色共同发挥作用。例如，如果仅以当前文本颜色绘制，带有浅蓝色、粉色和白色条纹的此标志
将无法传达相同的含义。
如今，对于大多数用户来说，表情符号是他们唯一看到的颜色字体。表情符号通常通过系统表情符号字体或插入图片（具有自己的复杂功能 
）显示在网络上。由于文件较大（尤其是基于位图的彩色字体），人们很难使用网页字体显示表情符号。通过支持 COLRv1，我们希望看到在网络及其他领域越来越多地使用创意彩色字体。
给我看看你的颜色
我们创建了一些示例供您使用：
示例中使用的来自 Google Fonts 的示例资源现已在 Google Fonts Web API 中发布。它们未列在 fonts.google.com 的目录中，因为它们仅适用于 Chrome 98 或更高版本，并且用于展示实验性工作。
您现在可以使用免费的开源工具自行制作 COLRv1 字体。请查看 nanoemoji 字体编译器，它可让您基于 SVG 源图片构建 COLRv1 字体，然后在 Chrome 98 或更高版本中试用。按照这些说明更改渐变颜色，尝试在 Bungee Spice 上自创旋转效果。
例如，您可以将 Bungee Spice 字体修改为具有蓝色和红色渐变，如下所示：
您可以在 Twitter 上将您的结果发送至 @googlefonts 🙂? 何不试试径向或扫描渐变呢？
COLRv1 的新变化
字体格式支持以多种方式支持颜色，所有这些方式的取舍各不相同，但目前为止在网页上都未取得理想效果。（如需详细了解权衡，请观看 Dominik 的 BlinkOn 15 大会演讲。）Chrome 98 支持 COLRv1（COLRv0 的进阶版）。我们希望 COLRv1 将图形功能和紧凑文件相结合，能够使其成为许多彩色字体用例的理想选择。COLRv1 添加了渐变、合成和混合功能，并改进了内部形状重用功能，可制作更紧凑的文件。
COLRv1 的表现力大致相当于在顶层添加的 SVG 原生功能以及混合和合成功能。有四种颜色填充类型：纯色、线性渐变、径向渐变和扫描/圆锥渐变。COLRv1 支持使用一整套平移、旋转、剪切和缩放转换来调整和转换字形元素的位置。此外，它还支持字体变体，并在字体中重复使用了现有的形状定义格式。
以水晶球表情符号为例：星形高亮形状的形状相同，但大小不同，这意味着只有一个形状可以重新定位和重复使用，而不会在文件中重复。通过这种格式，您可以在新字形中重复使用整个字形，而无需针对每个字形对相同的形状进行冗余编码。假设有一个带有花卉装饰的装饰性彩色字体，仅引用现有颜色字形，将相同的花朵形状放置在不同的字母上。对于网页字体用例，COLRv1 能够在 woff2 下很好地进行压缩。例如，使用 COLRv1 的 Twemoji 的测试 build 膨胀了大约 1.2 MB，但在采用 woff2 形式时则大约增加了 0.6 MB。完整 Noto 表情符号字形集的 build 从位图版本的 9MB 缩减为 COLRv1+woff2 形式的 1.85MB。
彩色字体用例
引人注目的标题
新颜色的字体会让视觉亮点、标题和横幅真正醒目。
无需再替换图片：表情符号字体
如果您支持用户生成的内容，您的用户可能会使用表情符号。如今，扫描文本并将遇到的任何表情符号替换为图片的情况非常常见，以确保一致的跨平台渲染并能够支持比操作系统支持的新版表情符号。然后，在剪贴板操作期间，这些图片必须切换回文本。下面是一个真实示例：
如果您有表情符号字体，只需以该字体呈现文本，如下所示：
<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>
同样，在表情符号回应组件中，COLRv1 可让您使用紧凑字体文件，而不是图片素材资源目录。
设想一下，若要完整的表情符号选择器，需要提取多少张图片！
图标字体的颜色
在图标字体中使用颜色可提高清晰度并使字形更易于理解。
艺术表现
节省空间的彩色字体可以在网络上的文本中呈现新的艺术表现形式。这个库菲风格的阿拉伯字体示例使用颜色渐变作为艺术解读，将传统书法的墨水流动应用于阿拉伯语的库菲风格（这种风格不是用笔尖和墨水书写，而是雕刻在石头上）的艺术解读。
功能检测
目前，若要确定浏览器引擎是否支持特定的彩色字体格式，可以采用以下两种方式：用户代理嗅探，或在库中搜索 @PixelAmbacht 的 ChromaCheck，以测试彩色字形在 Canvas 上的呈现效果。这两种解决方案都不是最优的。功能测试应仅检测特定功能本身，并避免用户代理嗅探。ChromaCheck 库无需执行会占用大量资源的 2D 画布操作即可确定支持情况。
Chrome 团队希望改进这一点，因此已在 CSS 工作组发起一系列讨论 [1、2]，以提供有关 JavaScript 中的浏览器字体技术支持的信息以及在 CSS 中以声明方式提供浏览器字体技术支持的信息。该团队计划在未来的 Chrome 版本中针对彩色字体和其他字体技术发布高效的功能检测。
当只有 Chrome 支持 COLRv1 时，如果您希望现在就在项目中使用彩色字体，可以通过两种方式来实现：让您的字体供应商也提供包含单色字形的 COLRv1 字体。不支持 COLRv1 的用户代理将回退到渲染单色字形。或者，您也可以使用 ChromaCheck 库或用户代理嗅探功能来确定是否支持 COLRv1。然后，您需要提供 CSS，以便在支持的用户代理中加载 COLRv1 字体，并在其他浏览器中使用 COLRv0、位图字体格式或 OpenType SVG 等替代字体格式。
CSS 字体调色板支持
如果使用一组不同的颜色不需要新字体，此功能会非常有用。幸运的是，存在一种机制：font-palette CSS 属性。Chrome 团队致力于在 Chrome 中添加对 font-palette 的支持。
COLRv1 字体与您
如果您有兴趣使用 COLRv1 字体，请向字体供应商询问要在项目中使用的 COLRv1 彩色字体，尝试上面的示例和演示，或者直接尝试制作您自己的字体。
如果您对 Chrome 中的 COLRv1 有任何反馈，请发布到 blink-dev 邮寄名单，或在问题跟踪器中提交问题。如果您对 COLRv1 字体格式本身有任何反馈，请在 COLRv1 规范 GitHub 代码库中提交问题。
在 Chrome 98 中，我们很高兴 COLRv1 如何将排版创意提升到全新的水平。
了解详情
如果您希望了解详情，可以参考我们提供的更多资源：
要了解 COLRv1 的工作原理及其在 Chrome 中的实现方式，请观看 Dominik 的 BlinkOn 15 大会演讲。
- 第 45 届国际 Unicode 大会：矢量彩色字体，作者：RoderickSheeter、Peter Constable 和 Dominik Röttsches（视频，演讲详情）
- nanoemoji 字体编译器，从 SVG 图片生成 COLRv1 字体
- Google Fonts 的彩色字体 GitHub 代码库，包含 Noto Emoji、Twemoji 的当前 build 和其他示例字体
- DJR 为探索 COLRv1 的 Bradley Initials 字体展示
- ChromaCheck 工具和库，用于检测可用的彩色字体技术
致谢
非常感谢 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 NiesvOL1。