簡介
最初，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；雖然技術上允許，但這會使文件膨脹並可能導致渲染不一致。
