iconfont 支持全新的彩色字體圖標(biāo)

一直以來，Web 中想要使用矢量的彩色圖標(biāo)只能通過 SVG 的方式，這極大的束縛了用戶的想象力，為此，我們一直在不斷地探索和嘗試。在解決了各種難題之后，今天，我很自豪地宣布，iconfont.cn 成為全球第一個(gè)支持彩色字體圖標(biāo)的生產(chǎn)管理平臺(tái)，這使得我們目前幾百萬的彩色圖標(biāo)可以無縫切換到新的彩色字體圖標(biāo)技術(shù)上，同時(shí)也帶來了很多激動(dòng)人心的新特性。

讓我們一起來探索一下吧，Let's go!

什么是彩色字體

彩色字體（colors fonts 或 chromatic fonts）是一種字體技術(shù)，它允許在每個(gè)字形中使用多種顏色。它不僅可以用在圖標(biāo)和表情符號(hào)（emoji）的設(shè)計(jì)中，也可以用在普通的文本字體中。想了解更多彩色字體背后的故事，可以看看我的連載文章《字體圖標(biāo)簡史》^[1]。

2008 年 Apple 在 iPhone 3G 中首次加入了彩色 emoji（左）
彩色字體格式

目前支持彩色字體的格式主要有以下幾種，它們都是 OpenType 規(guī)范的一部分：

?SVG：由 Adobe 和 Mozilla 主導(dǎo)的矢量字體標(biāo)準(zhǔn)，全稱是 OpenType SVG（以下簡稱 OT-SVG）。其中不僅包含了標(biāo)準(zhǔn)的 TrueType 或 CFF 字形信息，還包含了可選的 SVG 數(shù)據(jù)，允許為字體定義顏色、漸變甚至是動(dòng)畫效果。SVG 標(biāo)準(zhǔn)中的配色信息也將存儲(chǔ)在 CPAL 表中。注意：Apple 的實(shí)現(xiàn)遵循 W3C 的 SVG Native^[4] 規(guī)范，這是 SVG 1.1 的子集。?COLR/CPAL(version 0)：由微軟主導(dǎo)的矢量字體標(biāo)準(zhǔn)。其中 COLR 記錄圖層數(shù)據(jù)，CPAL 記錄配色信息，對(duì)其的支持集成在 Windows 8.1 及之后的版本中（該版本不支持漸變）。?CBDT/CBLC：由 Google 主導(dǎo)的位圖字體標(biāo)準(zhǔn)。其中 CBDT 記錄彩色位圖數(shù)據(jù)，CBLC 記錄位圖定位數(shù)據(jù)，這其實(shí)是 EBDT/EBLC 的彩色版本。?SBIX：由 Apple 主導(dǎo)的位圖字體標(biāo)準(zhǔn)，也就是 Apple Emoji 使用的格式。SBIX 即標(biāo)準(zhǔn)位圖圖像表其中包含了 PNG、JPEG 或 TIFF 的圖片信息，對(duì)其的支持集成在 macOS 和 iOS 中。?COLRv1 (version 1)：由 Google 推動(dòng)的基于** COLR/CPAL 表的升級(jí)版，支持漸變**、仿射變換（Affine transformation）和多種混合模式。目前已經(jīng)進(jìn)入了 OpenType 1.9 Alpha^[5] 規(guī)范中。iconfont 中的彩色字體圖標(biāo)

八年前，我在邊鋒網(wǎng)絡(luò)的分享《超越 icon font》^[6]中就介紹了一些彩色字體圖標(biāo)的技術(shù)。現(xiàn)在 OpenType 規(guī)范中彩色字體技術(shù)已經(jīng)趨于成熟了，是時(shí)候回歸初心，讓 iconfont 支持真正的多彩字體圖標(biāo)了。

iconfont 中的圖標(biāo)都是矢量的，所以只有兩種格式可選，OT-SVG 和 COLR，讓我們對(duì)比一下它們的優(yōu)缺點(diǎn)：

OT-SVG

• 優(yōu)點(diǎn)：支持漸變、陰影、濾鏡甚至 SVG 動(dòng)畫，還支持矢量和位圖混合使用。

• 缺點(diǎn)：文件體積大、渲染性能較差、不支持可變字體。Safari 出于性能和安全性考慮，對(duì)嵌入到字體中的 SVG 有諸多限制，另外 Chrome 中不打算支持該格式。

COLR

•  優(yōu)點(diǎn)：文件體積小、性能好、支持可變字體技術(shù)。

•  缺點(diǎn)：暫時(shí)不支持漸變、位圖（COLRv1 規(guī)范中已經(jīng)擴(kuò)展支持漸變）。

•  注意：當(dāng)彩色與單色圖標(biāo)共存時(shí)，Mac 中的 Chrome 中不能修改單色圖標(biāo)的顏色，這是 Chrome 的 bug^[7]（可以點(diǎn)一下右上角☆，以便他們可以快點(diǎn)修復(fù)）。

綜上，我們選擇了文件體積更小、性能更快、兼容性更好的 COLR 格式（以下所有彩色字體均指不帶漸變的 COLR 格式）。

彩色字體瀏覽器中的實(shí)際效果預(yù)覽^[8]

使用彩色字體在 Keynote 中制作一個(gè) Banner（示例^[9]）

彩色字體圖標(biāo)的優(yōu)勢

更好的瀏覽器兼容性

從 IE9 到 iOS 11，主流的瀏覽器全部支持 COLR 彩色字體格式，參見 caniuse.com^[10] 和真機(jī)測試截圖^[11]。

更小的體積

由于字體可以使用壓縮比極高的 WOFF2 壓縮，且 *COLR/CPAL *格式的字體相同的字形可以復(fù)用，因此彩色字體圖標(biāo)相比 SVG 圖標(biāo)體積要小很多。以 iconfont.cn 評(píng)論框中自帶的表情包^[12]（64 個(gè)圖標(biāo)）為例，對(duì)比如下：

在 Google 的 Noto Color Emoji 字體中：

?使用 WOFF2 壓縮：COLRv1 的文件體積大約是 OT-SVG 的三分之一（34.3%）。?不使用 WOFF2 壓縮：COLRv1 的文件體積大約是 OT-SVG 的一半（44.5％）。

更快的渲染性能

SVG 是基于 XML 的矢量格式，解析并光柵化渲染到屏幕中的時(shí)候會(huì)更加復(fù)雜。而字體技術(shù)使用的是系統(tǒng)級(jí)別的 API，例如 DirectWrite、Core Text 顯然比瀏覽器層層渲染要快得多。

在 Skia 冷緩存 SVG 和 COLRv1 的基準(zhǔn)測試^[13]中，繪制 SVG 字形比 COLRv1 要慢 20-45%，這種性能差異與初始頁面的繪制和字體大小更改息息相關(guān)。

更好的跨平臺(tái)支持

得益于 Skia 和 FreeType 中對(duì) COLR 格式良好的實(shí)現(xiàn)，使其可以輕松的移植到其他平臺(tái)。比如 Flutter 2 中使用的 Web 渲染器 CanvasKit^[14] 就集成了對(duì) COLR 彩色字體的支持，而且已經(jīng)支持漸變。

甚至在繼承了 Firefox OS^[15] 衣缽的 KaiOS^[16] 中也完美的支持，什么？沒聽說過 KaiOS？這可是印度第二大移動(dòng)操作系統(tǒng)！

圖片來源^[17]：caniuse.com 作者 Alexis Deveria

更廣泛的應(yīng)用場景

在瀏覽器之外，COLR 格式得到了史詩級(jí)的系統(tǒng)層面支持，這為彩色字體打開了新的天地，使其應(yīng)用場景不再局限于 Web。

例如 Keynote 中是不支持 SVG 矢量圖片的，而這一直是 「PPT 工程師」的苦惱，現(xiàn)在有了彩色字體技術(shù)，Keynote、Office 中使用矢量圖標(biāo)都不是問題。Windows 8.1 開始也在系統(tǒng)層面支持了 COLR 格式，所以微軟全家桶的軟件中也都全部支持。

從此你的 PPT 高清「無碼」、縱享絲般順滑，放的再大也不會(huì)模糊。

碼農(nóng)們?cè)趺崔k？別著急，無論是編輯器，還是命令行，只要系統(tǒng)支持了彩色字體，都可以使用。

合作探索

我們正在與釘釘合作，讓釘釘?shù)谋砬榘涩F(xiàn)在的 PNG 位圖 格式升級(jí)到彩色字體版本。當(dāng)前釘釘有 179 個(gè)靜態(tài)的 PNG 表情包，預(yù)計(jì)轉(zhuǎn)換為彩色字體格式后可以減小到 100 - 200KB 左右，圖標(biāo)越多，彩色字體的體積優(yōu)勢會(huì)越明顯。
釘釘表情轉(zhuǎn)換為 SVG 及彩色字體對(duì)比

iOS App 中釘釘彩色字體表情演示

如何使用

1.打開一個(gè)多色圖標(biāo)庫^[18]，選擇幾個(gè)喜歡的圖標(biāo)加入購物車。
2.點(diǎn)擊右側(cè)的購物車按鈕，打開購物車浮層。
3.在購物車浮層中，點(diǎn)擊新建項(xiàng)目按鈕，輸入項(xiàng)目名稱，然后點(diǎn)擊確定按鈕。這樣一個(gè)測試的彩色字體圖標(biāo)項(xiàng)目就建好了。
4.然后會(huì)自動(dòng)跳轉(zhuǎn)到新建的項(xiàng)目，點(diǎn)擊右上角的「項(xiàng)目設(shè)置」。
5.勾選字體格式中的「彩色」選項(xiàng)，點(diǎn)擊「保存」按鈕。
6.點(diǎn)擊「暫無代碼，點(diǎn)此生成」，稍后片刻，彩色字體生成會(huì)稍慢。
7.生成成功后，在線鏈接按鈕后面會(huì)多一個(gè)「預(yù)覽字體」菜單，打開即可測試實(shí)際彩色字體的效果啦。

未來

得益于良好的底層設(shè)計(jì)，未來一旦 Chrome 正式支持了帶有漸變的 COLRv1 格式，iconfont 可以很快的支持它。
另外，配合可變字體技術(shù)^[19]，還可以實(shí)現(xiàn)圖標(biāo)粗細(xì)調(diào)節(jié)、動(dòng)畫等特性。

設(shè)計(jì)因無限的想象力而偉大，而技術(shù)就是想象力翅膀，讓我們一起來探索更多有趣的創(chuàng)意！

致謝

設(shè)計(jì)團(tuán)隊(duì)：@鑫妍、@熙柚。
釘釘團(tuán)隊(duì)：@禾粉、@曉毒。
文章審閱：@承虎、@古西風(fēng)。

References

[1] 《字體圖標(biāo)簡史》: https://zhuanlan.zhihu.com/p/369194309
[2] Windows 10 周年更新: https://docs.microsoft.com/zh-cn/windows/win32/direct2d/svg-support
[3] Chrome Canary 90.0.4421.5: https://github.com/googlefonts/colr-gradients-spec#chromium-skia-freetype-support
[4] SVG Native: https://svgwg.org/specs/svg-native/
[5] OpenType 1.9 Alpha: https://docs.microsoft.com/zh-cn/typography/opentype/otspec190alpha/ot190alpha
[6] 《超越 icon font》: http://yisibl.github.io/share/exceed-icon-font-sh.html#/43
[7] Chrome 的 bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1190710
[8] 預(yù)覽: https://at.alicdn.com/t/iconfont/project/2445412.html
[9] 示例: https://at.alicdn.com/t/iconfont/project/2445412.html?spm=a313x.7781069.1998910419.35
[10] caniuse.com: https://caniuse.com/colr
[11] 真機(jī)測試截圖: https://www.yuque.com/u7268/iconfont/colr-test
[12] 表情包: https://at.alicdn.com/t/iconfont/project/900373.html
[13] 基準(zhǔn)測試: https://skia-review.googlesource.com/c/skia/+/395616
[14] CanvasKit: https://skia.org/docs/user/modules/canvaskit/
[15] Firefox OS: https://zh.wikipedia.org/zh-sg/Firefox_OS
[16] KaiOS: https://www.kaiostech.com/
[17] 圖片來源: https://github.com/Fyrd/caniuse/issues/2458#issuecomment-848199853
[18] 多色圖標(biāo)庫: https://pre-www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=29958
[19] 可變字體技術(shù): https://www.monotype.com/cn/%E8%B5%84%E6%BA%90/%E4%B8%93%E4%B8%9A%E7%9F%A5%E8%AF%86/%E5%8F%AF%E5%8F%98%E5%AD%97%E4%BD%93%E5%B8%A6%E6%9D%A5%E7%9A%84%E6%96%87%E5%AD%97%E8%AE%BE%E8%AE%A1%E5%8F%98%E9%9D%A9%E3%80%82