Chrome 98 开始支持 COLRv1 渐变彩色字体,相比前代 v0 增加了混合和合成功能,支持多种渐变填充,并能有效压缩体积,方便网页直接引入表情字体。
Chrome 98 开始支持 COLRv1 渐变彩色字体,相比前代 v0 增加了混合和合成功能,支持多种渐变填充,并能有效压缩体积,方便网页直接引入表情字体。
本文介绍COLRv1是COLRv0的演进版本,在Chrome 98中获得支持。它新增渐变、合成与混合功能,并通过形状复用实现更紧凑的文件尺寸,适合网页彩色字体场景。测试显示Noto Emoji的COLRv1+WOFF2版本仅1.85MB,远小于位图版本。
本文指出COLRv1是COLRv0的升级格式,后者已在早期得到部分支持。COLRv1在图形能力上与之相当,但通过渐变和复用进一步优化了压缩效果与表现力。
本文讨论彩色字体在网页中的应用,包括表情符号、图标及艺术表达。COLRv1格式让彩色字体文件更小、支持渐变,解决了此前位图字体体积大的问题,可直接通过CSS加载使用。
本文推荐nanoemoji作为开源工具,可将SVG源文件编译为COLRv1彩色字体。开发者可通过该工具在Chrome 98及以上版本中测试自定义字体效果。
本文指出 COLRv1 的图形表现力大致相当于 SVG Native,并在此基础上增加了混合与合成能力,支持实色、线性渐变、径向渐变和 sweep/conic 渐变四种填充方式,以及完整的变换操作。
文章说明采用 COLRv1 格式的彩色字体经 WOFF2 压缩后体积显著减小,例如 Twemoji 测试构建从 1.2MB 压缩至约 0.6MB,Noto Emoji 全套从位图的 9MB 降至 1.85MB。
本文提到 font-palette CSS 属性可让同一 COLRv1 字体通过不同调色板切换颜色,而无需生成新字体文件。Chrome 团队正在推进对该属性的支持,目前仍处于开发阶段,相关讨论已在 CSS 工作组展开。文章指出,该特性将显著提升 COLRv1 字体的实用性,避免为不同配色重复发布字体。
文章介绍 ChromaCheck 库可通过 Canvas 渲染测试检测浏览器是否支持特定彩色字体格式,但指出其需执行耗资源操作,并非理想的特性检测方案,目前 Chrome 团队正推动更高效的原生检测机制。
本文在“了解更多”部分提及 DJR 对 Bradley Initials 字体的展示,指出该字体用于探索 COLRv1 的渐变与色彩能力。链接指向 tools.djr.com/misc/bradley-initials/,作为 COLRv1 实际应用案例供开发者参考。文章将其作为 COLRv1 带来艺术表现力的例证之一。
Chrome 98版本由Chrome团队与字体团队共同实现对COLRv1的支持,使彩色矢量字体可在网页中高效使用。文章同时提到未来版本将提供更完善的特性检测机制。
本文以Bungee Spice为例展示COLRv1的渐变应用,用户可修改其颜色生成蓝红渐变等效果。文章提供构建说明,鼓励用户在Chrome中尝试类似艺术化彩色字体。
文中提到使用 COLRv1 构建的 Twemoji 测试版本,未压缩时约 1.2MB,经 WOFF2 压缩后约为 0.6MB,展示了该格式在表情符号网络字体场景下的体积优势。
文章对比显示,Noto Emoji 全套位图版本约 9MB,而 COLRv1 格式经 WOFF2 压缩后仅 1.85MB,并配有柱状图直观呈现两种格式的体积差异。
本文以 Reem Kufi Ink 为例,展示该阿拉伯字体利用 COLRv1 渐变实现书法墨迹效果,作为艺术化彩色字体的典型应用场景。
文章列出 Google Fonts 的 color-fonts GitHub 仓库,收录了 Noto Emoji、Twemoji 等 COLRv1 示例字体构建结果。文中还演示了通过 fonts.googleapis.com 引入 Noto Color Emoji 字体,以及 Material 图标在 Google Fonts 上的展示。Google Fonts 被定位为 COLRv1 字体分发与测试的重要平台。
可左右滑动查看