简介
最初，OpenType 字体格式不支持多色字体。这在 2013 年发生了变化，当时几家供应商推出了自己的解决方案，以满足操作系统、应用程序和网络浏览器对彩色表情符号的需求。我仍然记得参加 2013 年在阿姆斯特丹举行的 AtypI 会议，当时正式宣布将颜色添加到 OpenType 规范中。当时，对于采用哪种格式没有达成共识。决定是让所有主要参与者——Microsoft、Apple、Google、Mozilla 和 Adobe——各自提出自己的解决方案。
那时，我已经很清楚这会分散格局。事实上，在 2014 年，我在 High-Logic 论坛 上写道，这将导致竞争格式之间的一种"字体颜色战争"。十多年后，我们仍然在承受后果：OpenType 支持四种不同的颜色扩展。
- COLR/CPAL — Microsoft 的基于表的系统，具有分层字形和调色板。
- SVG — Mozilla 和 Adobe 的提案，嵌入 SVG 图形（可选地带有 CPAL）。
- CBDT/CBLC — Google 的基于位图的格式，用于 Chrome 中的彩色表情符号。
- sbix — Apple 的光栅图像格式（PNG、JPEG 等），用于 macOS、iOS 和 iPadOS。
在这些格式中，只有 COLR/CPAL 和 SVG 是可缩放的基于矢量的格式。FontCreator 支持这两种格式，使它们成为字体设计师最实用的选择。
COLR/CPAL
COLR 将彩色字形定义为单色轮廓的堆栈，每个轮廓都用调色板颜色绘制。因为它重用标准轮廓，所以它与可变字体无缝集成，并保持文件大小紧凑。
优势：轻量级、可缩放、可变字体友好。
限制：COLRv0 没有渐变；COLRv1（后来引入）添加了渐变、变换和合成。
在 FontCreator 中添加 COLR
要制作分层多色字形，您需要添加其他字形，然后为每个颜色成员定义颜色。与复合字形成员不同，您无法更改这些颜色成员的大小或位置。您需要确保单个字形都设计为适合彩色字形。
- 显示成员面板（Shift+F8）和调色板面板（Shift+F2）。
- 在字形编辑窗口中切换到颜色模式。
- 右键单击 → 添加（或单击成员面板中的添加图标）。
- 选择要包含的成员字形。
- 使用油漆桶工具分配调色板颜色。
实现说明
- 确保度量（前进宽度）在彩色字形和使用的字形成员之间匹配。
- 早期的 COLR 规范要求字形索引 1 为 .null 字形。这在当前规范中不再是要求。
SVG
SVG 扩展为每个字形嵌入一个 SVG 文档。它支持更丰富的图形，包括：
- 剪切路径、渐变、描边宽度。
- 不透明度和滤镜效果。
- 嵌入的光栅图像（通过 <image> 元素的 PNG/JPEG）。
只有受限的 SVG 1.1 子集在字体中有效：不允许 <a>、<text> 和 <font>，应避免动画或交互性。
最佳实践：
- 避免 <style> 和 viewBox，因为某些应用程序会错误地渲染它们。
- 优先使用矢量；光栅图像会增大文件大小并且缩放效果不佳。
在 FontCreator 中添加 SVG
FontCreator 不包括内置的 SVG 编辑器。您可以：
- 从 COLR 字形自动导出 SVG，或
- 从外部编辑器导入 SVG 图形。这提供了最大的灵活性，但可能很繁琐，因为坐标系通常需要调整，并且外部编辑器会产生臃肿的标记。
颜色调色板（CPAL）
CPAL 表定义可重用的颜色调色板：
- 前景色链接到用户选择的文本颜色。
- COLR：CPAL 是必需的；目前大多数应用程序仅使用第一个调色板，尽管 CSS font-palette 将在浏览器中带来更多控制。
- SVG：CPAL 是可选的，并未广泛实现。
网络浏览器彩色字体支持
| 网络浏览器 | 市场份额 | COLR 支持 | SVG 支持 |
|---|---|---|---|
| Chrome | 68% | 是 | – |
| Safari | 17% | 是 | 是 |
| Edge（基于 Chromium） | 5% | 是 | – |
| Firefox | 3% | 是 | 是 |
| Samsung Internet | 2% | 是 | – |
| Opera | 2% | 是 | – |
| Internet Explorer | <1% | 是 | – |
| 注意： 市场份额指示截至 2025 年 7 月。Edge 从 2017 年开始支持 SVG，但自 2020 年转移到 Chromium 后不再支持。Chromium 项目没有计划添加 OT-SVG 支持。 | |||
软件彩色字体支持
| 软件 | COLR/CPAL 支持 | SVG 支持 |
|---|---|---|
| Adobe Illustrator | 是（v29.3 / 2025+） | 是（CC 2018+） |
| Adobe InDesign | – | 是（CC 2019+） |
| Adobe Photoshop | 是（2025+） | 是（CC 2017+） |
| QuarkXPress | 是（2018+，包括 COLRv1） | 是（2018+） |
| Affinity Designer | 是 | – |
| Affinity Publisher | 是 | – |
| Sketch（macOS） | COLRv0 | 是（macOS 10.14+） |
| Microsoft Word（Windows 10/11） | 是 | 是 |
| Microsoft PowerPoint（Windows 10/11） | 是 | 是 |
| Microsoft Excel（Windows 10/11） | 是 | 是 |
| LibreOffice | 是（6.3+） | 部分 |
| paint.net（Windows） | 是 | – |
| CorelDRAW Graphics Suite | – | 是 |
| Figma | – | – |
| Procreate（iPad） | COLRv0 | 是 |
| Adobe After Effects / Premiere Pro | – | 是（2025+） |
| Inkscape | – | 部分 |
| Scribus | 部分 | – |
| GIMP | 部分 | – |
| 注意： COLR/CPAL 是基于轮廓的颜色格式（v0 = 分层字形；v1 添加渐变、变换和合成）。没有嵌入位图。大多数使用 CoreText 的原生 macOS 应用程序支持 COLRv0。CoreText 尚不支持 COLRv1。OpenType-SVG 存储 SVG 文档，可以包括矢量形状和嵌入的光栅图像（例如，通过 SVG <image> 元素的 PNG/JPEG），加上渐变/不透明度/滤镜。OpenType 使用受限的 SVG 1.1；功能支持因应用程序/操作系统而异。macOS 通常需要 10.14+ 才能渲染 SVG 字体。大型光栅内容可能会增加字体大小。 | ||
我应该使用哪种颜色扩展？
- 对于网络，COLR 是明确的选择：紧凑、可靠、可变字体兼容，并且在浏览器中普遍支持。
- 对于桌面出版，这取决于情况。虽然越来越多的软件支持 COLR，但有些仍然只识别 SVG。最好提供两种格式，以便最终用户可以决定使用哪一种。
指导：
- 如果渐变是不必要的，请优先使用 COLR。然后您可以导出为 SVG 以确保兼容性，确保两种格式共享相同的轮廓。
- 如果渐变或复杂渲染是必不可少的，请尽可能使用 COLRv1，或回退到 SVG。
- 避免在一个字体中同时打包 COLR 和 SVG；虽然技术上允许，但这会使文件膨胀并可能导致渲染不一致。
