字體圖標的使用與設計

字體圖標（iconfont）雖然有要被淘汰的趨勢，但是在其服役期間也解決了其他方案的很多痛點，如

• 圖片
  • 增加額外請求
  • 不能使用CSS控制其內部細節
  • 不同分辨率的適配
• CSS Sprites（圖片整合術）
  • background-position 定位具體圖片可維護性太差
  • 添加刪除圖片成本高，尤其是刪除圖片

CSS Sprites 其實在特定條件下（對圖片的改動頻次很低）也是比較不錯的解決方案，也啓發了SVG Sprites這種可以取代iconfont的方案。

字體圖標的使用 - 以Iconfont平臺爲例

下面我們以Iconfont平臺爲例介紹如何方便地生成、使用字體圖標：

登錄

首先我們點擊右上按鈕區域的小人圖標登錄，然後我們可以根據自己的條件選擇登錄方式：

新建項目

一般來說，爲了日後維護方便，我們會爲圖標新建一個項目：

按照我們工程的需要填寫必要的信息後，就可以成功新建一個空項目了：

此時項目內時空的，沒有任何圖標文件，此時我們就可以將設計好的SVG上傳到當前項目中了，或者使用其他人制作好的圖標文件（注意不要侵權）。

設計圖標前請務必查看圖標繪製原則，如果團隊內有其他設計風格也可，但一定要始終堅持某一種設計風格。

代碼中使用字體圖標

使用前請查看代碼應用，再根據自己工程特點靈活改變。

當我們將SVG圖標上傳工程後，我們就需要在代碼中使用圖標了，Iconfont爲我們提供了“線上”和“線下”兩種使用方式，可以根據自己的實際需求選擇使用方式。

線上使用方式

在項目中，點擊“查看在線鏈接”按鈕，第一次點擊時應該需要再次“生成代碼”，代碼生成後會看到一個css鏈接，如果已經生成代碼，則會看到一個css鏈接，在項目入口html文件中引入此css鏈接即可：

線下使用方式

在項目中，點擊“下載至本地”按鈕，可以將字體文件及示例文件以zip包的方式下載至本地：

對web端使用來說，針對圖標屬性又可分爲下面兩種使用方法：

• 單色/純色圖標：unicode引用(不常用，但支持ie6+)或font-class引用(常用，ie8+)
• 多色圖標：symbol引用(實際上就是上文提到的SVG Sprites，ie9+)

單色/純色圖標，並不是說不能改變顏色，只是說整體的圖標只能有一種顏色，是可以通過CSS控制的。而多色圖標是指在設計SVG文件時就將各顏色細節確定，在上傳SVG文件時一定要選擇保留顏色提交。

與設計師協作

對於編碼同學來說大多不關注圖標的設計過程，但是一定要知會設計師圖標設計的規範，比如圖標設計一定要儘量鋪滿畫布，這樣在使用時就不會受到莫名其妙留白的困擾了（對編碼來說，圖標自身的留白是不可控的，所以個人建議不要有，但是團隊中如果有既定的設計規範，只要堅持自己的設計規範即可）。

上文中也說道，在新建圖標項目時可以將設計師等協作人員作爲協作者添加進項目，這樣在需要添加或修改圖標時，只需要設計師上傳就好，而不必將圖標文件再發送給編碼同學。所以這裏就要有一個統一的命名規範需要協作者們共同遵守：

1. 命名時不需要帶前綴，新建項目時我們已經指定了前綴，如我們設置的前綴爲icon，上傳的SVG文件名爲table.svg，則我們使用font-class方式或symbol引用時使用的類名爲icon-table
2. 堅持一種連接規則，如駝峯、下劃線連接符、減號連接符等，一般使用減號連接符，如file-close.svg

圖標的設計

設計風格每個人都不同，但在一個項目中要堅持一種風格。

下面是我在使用字體圖標過程中總結出的一些設計注意點，作爲代碼狗，說的不對的地方請拍磚：

圖標要儘量鋪滿畫布

對於編碼來說，圖標本身留白未知的，所以不要依賴圖標本身留白控制元素間的間距。

• 對於寬高比大於1的圖標來說，寬度和畫布寬度相等，並且於畫布垂直居中
• 對於寬高比小於1的圖標來說，高度和畫布高度相等，並且於畫布水平居中，此時在代碼中使用要注意左右的留白會影響元素間的間距
• 對於寬高比等於1的圖標來說，高度、寬度分別和畫布高度、寬度相等（畫布一般來說是正方形）
  

儘量保證默認情況下尺寸合適

上面的規則是針對大多數圖標而言的，針對一些小圖標（如方向圖標、箭頭圖標等明顯尺寸偏小的圖標）來說不必滿足上面的條件，但還是要儘量保證默認情況下尺寸合適，同時於畫布水平、垂直居中即可。

這裏的默認情況下是指不特地針對這些小圖標使用樣式控制其尺寸。

使用“存儲爲”導出SVG圖標

圖標設計完成後，就需要將SVG圖標導出，此時要使用存儲爲命令，而不是導出命令。

以illustrator爲例，選擇“文件”->“存儲爲”，在存儲爲的彈窗中保存類型設置爲svg，並且爲其設置名稱後點擊“保存”。此時illustrator還不會真正保存文件，而是會彈出一個SVG選項的彈窗用於我們控制生成的svg文件的某些屬性，下面是我常用的設置：