更多圖標(biāo)設(shè)計干貨：

最近我將自己團(tuán)隊(duì)的圖標(biāo)升級了一下，現(xiàn)在的圖標(biāo)是這個樣子的：

對，我將圖標(biāo)變成了一種字體，后續(xù)都可以直接通過字體的方式調(diào)用。只要安裝了字體，哪怕不在設(shè)計軟件中也能使用。

如果是對 Apple 的設(shè)計比較熟悉的人可能發(fā)現(xiàn)了，Apple 的圖標(biāo)“SF Symbol” 也是通過這種方式管理的。如果你平常使用的是 SF Pro 或者 PingFang SC 等字體，可以直接通過 Apple 官方的 [SF Symbols](https://developer.apple.com/sf-symbols/) 來查找復(fù)制并使用。

Apple 也是將圖標(biāo)直接做到了字體里，并廣泛的用在了自己的設(shè)計體系中。那么這篇文章我會分享一下為什么這樣做，以及如何這樣做，也是作為自己在探索 Icon 字體化中的踩坑的記錄。

一、字體化的好處

簡單來說，就是性能好、易于使用和管理

1. 性能好

即使是相較于同樣是矢量圖的 SVG 格式，字體文件的大小也出乎意料的小。我這里做了一個測試，250 個左右的圖標(biāo)，導(dǎo)出成 SVG 后大約是 900 KB，而對應(yīng)的 woff 字體文件則是 60 KB。即使算上為了兼容舊瀏覽器而增加的 ttf 和 eot 格式，一共也不到 200 KB。

更小的尺寸帶來的不止是加載速度更快，小到這個尺寸后，開發(fā)完全可以在網(wǎng)頁初次啟動時，直接將兼容的字體文件下載緩存，后續(xù)可以無縫的顯示圖標(biāo)。而 SVG 一半是用到的時候再加載，可能存在加載出錯圖標(biāo)無法顯示的情況，通過多次網(wǎng)絡(luò)請求也會輕微增加 Server 的負(fù)擔(dān)。

前者是 60K 的單次請求（根據(jù)用戶瀏覽器選擇文件），后者是 900 K 共計的多次請求。很顯然前者優(yōu)于后者。

2. 易于使用

我之前在設(shè)計還原的時候有個很煩的地方，雖然輸出的 SVG 都是一樣的格式，但是不同模塊的開發(fā)者不一樣，他們對于 SVG 的使用方式也“各有千秋”，經(jīng)常導(dǎo)致最終的頁面和設(shè)計師設(shè)計的有一些出入。

更加致命的是，這些出入還非常細(xì)微，比如說圖標(biāo)的正常尺寸是 16px，但是某個開發(fā)也許在實(shí)現(xiàn)時錯誤地應(yīng)用了某種樣式，最終尺寸變成了 15px。當(dāng)下核查時很難看出 1px 的差異，不過當(dāng)這些錯誤積累了幾個之后，界面的錯位就會比較嚴(yán)重了。

Icon font 的使用實(shí)際上是將圖標(biāo)用字體的方式進(jìn)行渲染，字體的樣式設(shè)置相對比較單一，不會出現(xiàn) SVG 群魔亂舞一樣的情況。而且，對于字體的 CSS 樣式可以原封不動的用在 icon font 上，比如開發(fā)人員可以直接修改圖標(biāo)的大小和顏色，而不需要依賴設(shè)計師重新提供素材。

總之，減少了開發(fā)的使用成本，反過來也會讓后期的設(shè)計核查輕松不少。

3. 易于管理

這是最大的好處，也是推動我使用 iconfont 的最大原因。

我先講講之前團(tuán)隊(duì)的現(xiàn)狀，我們的團(tuán)隊(duì)是一個 startup 公司，也就是創(chuàng)業(yè)團(tuán)隊(duì)。產(chǎn)品迭代的速度非常快，有時候甚至是上個版本開發(fā)到一半，設(shè)計和需求就改動了，對應(yīng)的 icon 也更新的特別頻繁。所以可以預(yù)見的是，在版本迭代了一段時間后，產(chǎn)品中不同版本的圖標(biāo)混雜在一起，設(shè)計師浪費(fèi)了大量的時間在圖標(biāo)的細(xì)節(jié)核查上。

那么圖標(biāo)的管理就非常重要了，而管理圖標(biāo)的方式就是 icon font。

icon font 因?yàn)楸旧砭褪且环N字體，而字體是有獨(dú)特的 id 的。比如 emoji 也是一種字體，??對應(yīng)的 id 就是“U+1F600”，其他 emoji 也一樣。這樣后續(xù)如果更新了這個 emoji 樣式，只要保證更新后的 emoji 還是這個 id，那么所有應(yīng)用了這個圖標(biāo)的地方都會更新。

所以 icon font 的管理方式說白了就是，開發(fā)者在需要圖標(biāo)的地方通過 id 引用圖標(biāo)，而 font 文件中則包含了 id 和對應(yīng)的圖標(biāo)信息。這樣每次更新 font 文件都會更新網(wǎng)站中的所有對應(yīng)圖標(biāo)。

而 font 文件則完全可以由設(shè)計師來維護(hù)。理想情況下，設(shè)計師更新圖標(biāo)后，將 SVG 們轉(zhuǎn)成新的 iconfont，開發(fā)人員直接替換，就完成了一次圖標(biāo)更新，非常簡單快捷。

那么 icon font 文件應(yīng)該如何制作呢？請看下一章節(jié)。

二、Icon Font 制作入門

步驟：

1. 調(diào)整 Icon
2. 上傳平臺
3. 設(shè)置發(fā)布參數(shù)

1. 調(diào)整 Icon

首先是要調(diào)整 Figma 中的圖標(biāo)，因?yàn)樵胶唵蔚膱D標(biāo)越不容易出問題，所以我建議是將形狀中的 line 先 outline，然后全部合并 ，最后 flatten，總之是保證最后只有一個形狀。

按理來說三板斧下來這個圖標(biāo)應(yīng)該只剩下填充，沒有描邊了，不過以防萬一還是要確認(rèn)一下。

對了填充最好統(tǒng)一用同一個顏色，雖然不影響最后使用，但是一致了看著舒服。

最終導(dǎo)出的文件，應(yīng)該是一個單圖層，無描邊僅填充的 SVG 文件。

2. 上傳平臺

國內(nèi)雖然阿里有一個同名的 iconFont 網(wǎng)站，不過上傳圖標(biāo)要審核，這里建議還是使用國外的 [icomoon](https://icomoon.io/app/#/select) 。Icomoon 雖然運(yùn)行在瀏覽器，但應(yīng)該屬于本地軟件（類似于 photopea），也不用擔(dān)心自己的設(shè)計泄漏，只不過需要及時保存編輯的內(nèi)容，不然瀏覽器一清緩存就沒有了。

Anyway，上一部中導(dǎo)出的 SVG 們，可以直接導(dǎo)入到這個平臺中。

甚至還可以做一些簡單的編輯，比如去色裁剪縮放。上一步里如果忘記去色了可以在這一步完成。

需要注意的是，一些復(fù)雜的圖標(biāo)可能無法按你預(yù)期的。例如，如果我使用了不同的方式畫了 googledrive 的圖標(biāo)，即使在 Figma 和系統(tǒng)中看上去一樣，但導(dǎo)入后就會有明顯的差異。

有辦法調(diào)整，但這部分比較復(fù)雜，我放到后面再講。

3. 設(shè)置發(fā)布參數(shù)

如果圖標(biāo)后續(xù)還存在迭代的可能，務(wù)必認(rèn)真填寫發(fā)布參數(shù)，不然后面版本會亂掉。

1. 最下面的 Version 是最重要的，Major 是大版本號，Minor 是小版本號，高版本可以覆蓋低版本。建議每次有新增圖標(biāo)就將 Minor 加一，如果圖標(biāo)整體風(fēng)格改動較大就增加 Major
2. 字體的名字和前后綴可以任意填寫，不過最好先和開發(fā)確認(rèn)，避免和他們定義的變量名重合了
3. Font Metrics 適用于圖標(biāo)和文字混合輸入的情況，比如 Apple 的 Symbol 就可以支持和文字一起輸入。我的圖標(biāo)都是和文字獨(dú)立的，就不需要考慮這個。
4. 其他選項(xiàng)按默認(rèn)的來

最終導(dǎo)出后，是一個壓縮包，里面包含了字體文件和用于連接網(wǎng)頁的 css，以及一些 demo 和簡單教程。

剩下的事情就是交付開發(fā)了。

4. 版本管理

如果你沒有清理系統(tǒng)垃圾的習(xí)慣，那么之前你在 icomoon 網(wǎng)站上編輯過的內(nèi)容都會存在本地，下次點(diǎn)開就應(yīng)該還在，可以繼續(xù)更新圖標(biāo)，然后導(dǎo)出新版本的 icon font 文件。

但是，如果瀏覽器的緩存被清了，千萬不要重新在 icomoon 上開一個新的項(xiàng)目，再次導(dǎo)入所有的 icon 文件。因?yàn)槊看螌?dǎo)入新圖標(biāo)時，icomoon 都會給圖標(biāo)創(chuàng)建一個 id 來對應(yīng)圖標(biāo)。在新的項(xiàng)目中的每個 id - 圖標(biāo) 的對應(yīng)關(guān)系，不太可能和舊項(xiàng)目一致，如果直接將新項(xiàng)目導(dǎo)出的文件交付開發(fā)，整個平臺的圖標(biāo)都會亂掉。

這個時候，應(yīng)該導(dǎo)入上個版本的項(xiàng)目文件，在那基礎(chǔ)上繼續(xù)更新。項(xiàng)目文件就是之前導(dǎo)出的文件中的 selection.json，里面包含了所有的圖標(biāo)和上個版本的發(fā)布參數(shù)。

5. SVG 的填充模式

SVG 是有兩種填充模式的，nonzero 和 evenodd，具體的差別可以看[搞懂 SVG/Canvas 中 nonzero 和 evenodd 填充規(guī)則](https://www.zhangxinxu.com/)，這篇講的比較清楚。

icomoon 目前支持的是 nonzero 以及一些 簡單形狀的 evenodd。Figma 則是兩種都支持，這就導(dǎo)致了，可能 SVG 在 evenodd 模式下看上去是正常的，在 nonzero 模式下就不如預(yù)期了。

Figma 中默認(rèn)使用的是 evenodd 模式，但是依賴插件 [Vector Path Editor](https://www.figma.com/community/plugin) 可以切到 nonzero 模式，并調(diào)整在該模式下的填充規(guī)則。

對于一些復(fù)雜的圖標(biāo)，務(wù)必先在這個插件的幫助下調(diào)整填充模式進(jìn)行預(yù)覽。

總結(jié)

（下面是 GPT 生成的）

通過本文的介紹，相信你已經(jīng)了解了 Icon 字體化的好處以及制作方法。以下是本文的核心總結(jié)：

1. 性能優(yōu)異

Icon 字體文件體積小，加載效率高，相比 SVG 格式更加適合網(wǎng)頁的快速響應(yīng)需求，減少多次網(wǎng)絡(luò)請求和 Server 負(fù)擔(dān)。

2. 使用方便

Icon 字體統(tǒng)一了圖標(biāo)的管理方式，減少了 SVG 使用中可能出現(xiàn)的誤差和不一致，讓開發(fā)人員能夠更高效地調(diào)整圖標(biāo)樣式（如大小、顏色），降低了設(shè)計還原和溝通的成本。

3. 便于管理

Icon 字體的 `id` 機(jī)制使得圖標(biāo)更新高效且規(guī)范，尤其適合頻繁迭代的團(tuán)隊(duì)，可以確保圖標(biāo)版本管理清晰，避免因新建項(xiàng)目導(dǎo)致的圖標(biāo)錯亂問題。

4. 制作簡單

從圖標(biāo)調(diào)整到平臺上傳，再到發(fā)布參數(shù)設(shè)置，只需幾個簡單的步驟即可完成。合理的版本管理和發(fā)布參數(shù)設(shè)置，可以讓后續(xù)更新和交付開發(fā)變得更加快捷。

5. 注意事項(xiàng)

要留意 SVG 填充模式（nonzero 和 evenodd）在不同工具間的差異。

制作 Icon 字體時，推薦使用如 Icomoon 這樣的工具，并妥善保管項(xiàng)目文件（`selection.json`）以便后續(xù)更新。

通過以上方法，你的團(tuán)隊(duì)可以輕松實(shí)現(xiàn)高效的圖標(biāo)管理和交付，提升整體設(shè)計和開發(fā)協(xié)作效率。