紧凑、易于压缩的彩色矢量字体，支持所有您喜爱的字体 渐变色变色。
在 Chrome 98 中，Chrome 和字体团队增加了对 COLRv1 的支持， COLRv0 字体格式的演变， 添加渐变、合成和混合，以及改进的内部形状重用 适用于压缩效果良好的清晰、紧凑的字体文件。
立即上色
在网页上，文本通常以 CSS 中指定的颜色绘制。字体没有
并不定义任何特定的颜色，它只是指示像素应该
。这通常是件好事。CSS 可让作者灵活地选择
color 决定。不过，有时一个字形包含多种颜色，
含义。例如，带有浅蓝色、粉色和白色条纹的 
标志不会
如果只是以当前文本颜色绘制，则传达相同的含义。
如今，对于大多数用户来说，表情符号是他们看到的唯一彩色字体。表情符号
一般通过系统表情符号字体或插入图片
（它有自己的复杂功能 
）。大文件
尤其是基于位图的彩色字体，
表情符号的字体。通过支持 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 原生 Plus 版 混合和合成 顶部。有四种颜色填充类型：纯色、线性渐变、径向填充 以及清除/圆锥梯度。通过 COLRv1，您可以重新定位和转换 使用一整套平移、旋转、透明和缩放的字形元素 转换。此外，它还支持字体变体和重复使用 字体中的现有形状定义格式。
以水晶球表情符号为例：星形突出显示是 形状相同但尺寸不同，这就意味着 重新放置和重复使用，而不在文件内出现重复内容。该格式允许 您可以在新字形中重复使用完整字形，而不必重复进行 对每个字形的相同形状进行编码。想象一种装饰色字体， 花卉装饰，在不同的字母上放置相同的花朵形状 来调整颜色。对于网页字体用例，COLRv1 压缩率远低于 woff2。例如，使用 COLRv1 的 Twemoji 测试 build 膨胀后大约需要 1.2 MB，而在 woff2 中大约需要 0.6 MB。 完整版 Noto 表情符号字形集合从位图版本的 9MB 缩减至 1.85MB （采用 COLRv1+woff2 形式）。
<ph type="x-smartling-placeholder">
彩色字体用例
吸睛头条
采用新颖的配色字体，让视觉亮点、标题和横幅真正醒目 。
不再需要替换图片：表情符号字体
如果您支持用户生成的内容，您的用户可能会使用表情符号。今天 一种常见的做法是扫描文本并替换图片中出现的任何表情符号， 可确保跨平台呈现的一致性，并且能够支持较新的 超过操作系统支持的表情符号。然后，必须将这些图片切换回文字 剪贴板操作期间显示的内容。下面是一个真实示例：
<ph type="x-smartling-placeholder">
如果您有表情符号字体，只需以该字体渲染文本即可，如下所示：
<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 提供了使用 压缩字体文件，而不是图片资源目录。
试想一下，您必须获取多少张图片，才能使用完整的表情符号选择器！
图标字体的颜色
在图标字体中使用颜色可以提高清晰度，使字形更易于理解。
艺术表达
节省空间的彩色字体可在 。此 Kufi 风格的阿拉伯字体示例使用颜色渐变作为 对传统书法墨迹的艺术解读 库菲风格的阿拉伯语写作风格 不是用笔尖和墨水刻字，而是刻在石头上。
功能检测
目前，需要确定浏览器引擎是否支持特定的颜色 字体格式都可以通过用户代理嗅探或搜索 ChromaCheck 等工具 @PixelAmbacht，用于测试颜色的渲染 画布上的字形。这两种解决方案都不是最佳解决方案。功能测试应检测 只限于某个特定功能本身，并避免用户代理嗅探。ChromaCheck 库不需要针对 决定支持。
Chrome 团队希望改进这一问题，并发起了一系列讨论 [1、 2] 提供有关浏览器字体技术支持的 JavaScript 和 在 CSS 中进行声明。该团队计划针对 彩色字体和其他字体技术的功能。
如果您想立即在项目中使用彩色字体，请在 COLRv1 时 支持仅限于 Chrome，您可以采用以下两种方式： 供应商（针对同样包含单色字形的 COLRv1 字体）。用户代理 不支持 COLRv1 将回退为呈现单色 字形。或者，您也可以使用 ChromaCheck 库或用户代理 嗅探功能以确定是否支持 COLRv1。然后提供 在支持用户代理时加载 COLRv1 字体，并使用备用字体 例如 COLRv0、位图字体格式或 OpenType SVG。
CSS font-palette 支持
如果使用不同的颜色集 需要使用新字体。幸运的是，存在一种机制： 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 大会：矢量彩色字体，Roderick 演讲 Sheeter、Peter Constable 和 Dominik Röttsches （视频、 通话详情）
- nanoemoji 字体编译器，生成 SVG 图片中的 COLRv1 字体
- Google Fonts 的 color-fonts GitHub 代码库 包含最新版 Noto 表情符号、Twemoji 和其他示例字体
- 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 的贡献。