來源： Alibaba F2E公衆号
作者：一絲
一直以來，Web 中想要使用矢量的彩色圖示隻能通過 SVG 的方式，這極大的束縛了使用者的想象力，為此，我們一直在不斷地探索和嘗試。在解決了各種難題之後，今天，我很自豪地宣布，iconfont.cn 成為全球第一個支援彩色字型圖示的生産管理平台，這使得我們目前幾百萬的彩色圖示可以無縫切換到新的彩色字型圖示技術上，同時也帶來了很多激動人心的新特性。
讓我們一起來探索一下吧，Let's go!
什麼是彩色字型
彩色字型（colors fonts 或 chromatic fonts）是一種字型技術，它允許在每個字形中使用多種顔色。它不僅可以用在圖示和表情符号（emoji）的設計中，也可以用在普通的文本字型中。想了解更多彩色字型背後的故事，可以看看我的連載文章
《字型圖示簡史》
2008 年 Apple 在 iPhone 3G 中首次加入了彩色 emoji（左）
彩色字型格式
目前支援彩色字型的格式主要有以下幾種，它們都是 OpenType 規範的一部分：
| 公司/組織 | 字型格式（表名） | 矢量 | 位圖 | 漸變 | 系統支援 |
|---|---|---|---|---|---|
| W3C | SVG | ✅ | macOS 10.14+, iOS 12+, Windows 10 周年更新 | ||
| Microsoft | COLR | ❌ | macOS 10.13+, iOS 11+, Windows 8.1+ | ||
| Apple | SBIX | macOS and iOS | |||
| CBDT | |||||
| Google&Microsoft | COLRv1 | 僅 Chrome Canary 90.0.4421.5 + |
- SVG：由 Adobe 和 Mozilla 主導的矢量字型标準，全稱是 OpenType SVG（以下簡稱 OT-SVG）。其中不僅包含了标準的 TrueType 或 CFF 字形資訊，還包含了可選的 SVG 資料，允許為字型定義顔色、漸變甚至是動畫效果。SVG 标準中的配色資訊也将存儲在 CPAL 表中。注意：Apple 的實作遵循 W3C 的 SVG Native 規範，這是 SVG 1.1 的子集。
- COLR/CPAL(version 0)：由微軟主導的矢量字型标準。其中 COLR 記錄圖層資料，CPAL 記錄配色資訊，對其的支援內建在 Windows 8.1 及之後的版本中（該版本不支援漸變）。
- CBDT/CBLC：由 Google 主導的位圖字型标準。其中 CBDT 記錄彩色位圖資料，CBLC 記錄位圖定位資料，這其實是 EBDT/EBLC 的彩色版本。
- SBIX：由 Apple 主導的位圖字型标準，也就是 Apple Emoji 使用的格式。SBIX 即标準位圖圖像表其中包含了 PNG、JPEG 或 TIFF 的圖檔資訊，對其的支援內建在 macOS 和 iOS 中。
- COLRv1 (version 1)：由 Google 推動的基于 COLR/CPAL 表的更新版，支援漸變、仿射變換（Affine transformation）和多種混合模式。目前已經進入了 OpenType 1.9 Alpha 規範中。
iconfont 中的彩色字型圖示
八年前，我在邊鋒網絡的分享《超越 icon font》[6]中就介紹了一些彩色字型圖示的技術。現在 OpenType 規範中彩色字型技術已經趨于成熟了，是時候回歸初心，讓 iconfont 支援真正的多彩字型圖示了。
iconfont 中的圖示都是矢量的，是以隻有兩種格式可選，OT-SVG 和 COLR，讓我們對比一下它們的優缺點：
OT-SVG
- 優點：支援漸變、陰影、濾鏡甚至 SVG 動畫，還支援矢量和位圖混合使用。
- 缺點：檔案體積大、渲染性能較差、不支援可變字型。Safari 出于性能和安全性考慮，對嵌入到字型中的 SVG 有諸多限制，另外 Chrome 中不打算支援該格式。
- 優點：檔案體積小、性能好、支援可變字型技術。
- 缺點：暫時不支援漸變、位圖（COLRv1 規範中已經擴充支援漸變）。
- 注意：當彩色與單色圖示共存時，Mac 中的 Chrome 中不能修改單色圖示的顔色，這是 Chrome 的 bug （可以點一下右上角☆，以便他們可以快點修複）。
綜上，我們選擇了檔案體積更小、性能更快、相容性更好的 COLR 格式（以下所有彩色字型均指不帶漸變的 COLR 格式）。
彩色字型浏覽器中的實際效果
預覽 使用彩色字型在 Keynote 中制作一個 Banner（
示例）
彩色字型圖示的優勢
更好的浏覽器相容性
從 IE9 到 iOS 11，主流的浏覽器全部支援 COLR 彩色字型格式，參見
caniuse.com和
真機測試截圖。
更小的體積
由于字型可以使用壓縮比極高的 WOFF2 壓縮，且 COLR/CPAL 格式的字型相同的字形可以複用，是以彩色字型圖示相比 SVG 圖示體積要小很多。以 iconfont.cn 評論框中自帶的
表情包（64 個圖示）為例，對比如下：
在 Google 的 Noto Color Emoji 字型中：
- 使用 WOFF2 壓縮：COLRv1 的檔案體積大約是 OT-SVG 的三分之一（34.3%）。
- 不使用 WOFF2 壓縮：COLRv1 的檔案體積大約是 OT-SVG 的一半（44.5％）。
更快的渲染性能
SVG 是基于 XML 的矢量格式，解析并光栅化渲染到螢幕中的時候會更加複雜。而字型技術使用的是系統級别的 API，例如 DirectWrite、Core Text 顯然比浏覽器層層渲染要快得多。
在 Skia 冷緩存 SVG 和 COLRv1 的
基準測試中，繪制 SVG 字形比 COLRv1 要慢 20-45%，這種性能差異與初始頁面的繪制和字型大小更改息息相關。
更好的跨平台支援
得益于 Skia 和 FreeType 中對 COLR 格式良好的實作，使其可以輕松的移植到其他平台。比如 Flutter 2 中使用的 Web 渲染器
CanvasKit就內建了對 COLR 彩色字型的支援，而且已經支援漸變。
甚至在繼承了
Firefox OS衣缽的
KaiOS中也完美的支援，什麼？沒聽說過 KaiOS？這可是印度第二大移動作業系統！
：caniuse.com 作者 Alexis Deveria
更廣泛的應用場景
在浏覽器之外，COLR 格式得到了史詩級的系統層面支援，這為彩色字型打開了新的天地，使其應用場景不再局限于 Web。
例如 Keynote 中是不支援 SVG 矢量圖檔的，而這一直是 「PPT 工程師」的苦惱，現在有了彩色字型技術，Keynote、Office 中使用矢量圖示都不是問題。Windows 8.1 開始也在系統層面支援了 COLR 格式，是以微軟全家桶的軟體中也都全部支援。
從此你的 PPT 高清「無碼」、縱享絲般順滑，放的再大也不會模糊。
碼農們怎麼辦？别着急，無論是編輯器，還是指令行，隻要系統支援了彩色字型，都可以使用。
合作探索
我們正在與釘釘合作，讓釘釘的表情包由現在的 PNG 位圖 格式更新到彩色字型版本。目前釘釘有 179 個靜态的 PNG 表情包，預計轉換為彩色字型格式後可以減小到 100 - 200KB 左右，圖示越多，彩色字型的體積優勢會越明顯。
釘釘表情轉換為 SVG 及彩色字型對比
iOS App 中釘釘彩色字型表情示範視訊如何使用
1.打開一個
多色圖示庫，選擇幾個喜歡的圖示加入購物車。
2.點選右側的購物車按鈕，打開購物車浮層。
3.在購物車浮層中，點選建立項目按鈕，輸入項目名稱，然後點選确定按鈕。這樣一個測試的彩色字型圖示項目就建好了。
4.然後會自動跳轉到建立的項目，點選右上角的「項目設定」。
5.勾選字型格式中的「彩色」選項，點選「儲存」按鈕。
6.點選「暫無代碼，點此生成」，稍後片刻，彩色字型生成會稍慢。
7.生成成功後，線上連結按鈕後面會多一個「預覽字型」菜單，打開即可測試實際彩色字型的效果啦。
未來
得益于良好的底層設計，未來一旦 Chrome 正式支援了帶有漸變的 COLRv1 格式，iconfont 可以很快的支援它。
另外，配合
可變字型技術，還可以實作圖示粗細調節、動畫等特性。
詳見
視訊設計因無限的想象力而偉大，而技術就是想象力翅膀，讓我們一起來探索更多有趣的創意！
緻謝
設計團隊：@鑫妍、@熙柚。
釘釘團隊：@禾粉、@曉毒。
文章審閱：@承虎、@古西風。