紧凑、易压缩的彩色矢量字体，包含您喜爱的所有渐变风格。
在 Chrome 98 中，Chrome 和 Fonts 团队添加了对 COLRv1 的支持。COLRv1 是 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 字体，使其呈现蓝色和红色的渐变效果，如下所示：
欢迎将结果发推给 @googlefonts 🙂? 不妨试试径向渐变或扫描渐变效果。
COLRv1 中的新功能
该字体格式支持多种颜色支持方式，但每种方式都有不同的权衡，但到目前为止，还没有一种在 Web 上取得成功。（如需详细了解权衡，请参阅 Dominik 在 BlinkOn 15 大会上的演讲。） Chrome 98 支持 COLRv1（COLRv0 的升级版）。我们希望 COLRv1 的图形功能和紧凑文件的组合使其成为许多彩色字体用例的理想之选。COLRv1 增加了渐变、合成和混合功能，并改进了内部形状重用，使文件更加紧凑。
COLRv1 具有表现力出色的功能，功能大致相当于 SVG 原生，此外还增加了混合和合成功能。颜色填充有四种类型：纯色、线性渐变、径向渐变和扫掠/圆锥渐变。借助 COLRv1，您可以使用一整套平移、旋转、剪切和缩放转换来重新定位和转换字形元素。此外，它还支持字体变体，并在字体中重复使用现有的形状定义格式。
以水晶球表情符号为例：星形突出显示的形状相同，但大小不同，这意味着只能重新放置和重复使用一个形状，而无需在文件内复制。借助此格式，您可以在新字形中重复使用完整字形，而无需为每个字形冗余编码相同的形状。假设有一个带有花卉装饰的装饰性彩色字体，其中相同的花朵形状只需引用现有的颜色字形，即可在不同的字母上放置。对于 Web 字体用例，COLRv1 在 woff2 下可实现良好的压缩。例如，使用 COLRv1 的 Twemoji 测试 build 膨胀后大约需要 1.2 MB，但以 woff2 形式大约需要 0.6 MB。完整 Noto Emoji 字形集的 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 版本中发布针对彩色字体和其他字体技术的高效特征检测功能。
当 COLRv1 支持仅限于 Chrome 时，如果您想立即在项目中使用彩色字体，可以采用以下两种方法：让您的字体供应商也提供包含单色字形的 COLRv1 字体。不支持 COLRv1 的用户代理将回退为渲染单色字形。或者，您也可以使用 ChromaCheck 库或用户代理嗅探来确定是否支持 COLRv1。然后，您可以提供在支持的用户代理中加载 COLRv1 字体的 CSS，并在其他浏览器中使用替代字体格式，例如 COLRv0、位图字体格式或 OpenType SVG。
CSS font-palette 支持
如果使用其他颜色组合不需要使用新字体，将会非常有用。幸运的是，有一个机制可以解决此问题：font-palette CSS 属性。Chrome 团队正致力于在 Chrome 中增加对字体调色板的支持。
COLRv1 字体与您
如果 COLRv1 字体引起了您的兴趣，请向字体供应商咨询要在项目中使用的 COLRv1 彩色字体，试用上面的示例和演示，或者不妨直接着手尝试自行制作？
如果您对 Chrome 中的 COLRv1 有任何反馈，请将问题发布到 blink-dev 邮寄名单，或者在我们的问题跟踪器中提交问题。如果您对 COLRv1 字体格式本身有任何反馈，请在 COLRv1 规范 GitHub 代码库中提交问题。
我们很高兴在 Chrome 98 中推出 COLRv1，它将为 Web 带来全新的排版创意。
了解详情
如果您想了解更多详情，可以参阅以下资源：
要了解 COLRv1 的工作原理及其在 Chrome 中的实现方式，请观看 Dominik 的 BlinkOn 15 大会演讲。
- 第 45 届国际 Unicode 大会：矢量彩色字体，演讲者：Roderick Sheeter、Peter Constable 和 Dominik Röttsches（视频、演讲详情）
- nanoemoji 字体编译器，用于从 SVG 图片生成 COLRv1 字体
- Google Fonts 的 color-fonts GitHub 代码库，其中包含 Noto Emoji、Twemoji 和其他示例字体的当前 build
- DJR 展示 Bradley Initials 字体，探索 COLRv1
- 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 Nieskens 等对 COLRv1 做出的贡献。