在做ui設計的工作中，因為程序員的要求，所以接觸到字體庫。這里的字體庫是指把一個項目要用到的圖標做成svg格式，然后借助網站生成像字體一樣可以直接改變大小和顏色的文件包。（ps: svg格式是矢量圖，所以顯示更清晰，但存在瀏覽器適配問題，png圖片可能會糊，占存大）

因為字體庫給程序員，他們可以自己修改里面圖標的大小和顏色，同時有的圖標就可以跨項目利用，還不用設計師去修改顏色，設計師也不用去為了適配輸出多套圖標，減少設計師的工作時間；同時使用sketch的同學還可以下載自己的圖標在設計稿里使用，使用方法會在文章里具體介紹。但是字體庫有自己的局限，比如漸變圖標或者多色圖標是沒有辦法適用字體庫的。總體而言，字體庫可以節省設計師時間，讓我們有更多的時間去做個人的知識積累啦，也方便了程序員的工作。但是每個人有自己的習慣，根據喜好來就好。

在制作過程中筆者踩了不少的坑，所以在這里總結一下自己的坑，方便大家規避。

一、借助平臺

幫助設計師制作字體庫的平臺有icon moon和阿里的iconfont等。

二、制作工具

我個人制作圖標工具是Ai

三、制作方法和遇到的坑

1.在ai里把自己想要的圖標做好，這里以iconfont平臺為例，當我把圖標做完，存儲為svg格式，然后登錄iconfont網站，鼠標懸停在圖標管理，會有我的圖標下拉菜單，點擊進入后點擊上傳圖標，把自己做好的svg文件拖入(這里有第一個坑，因為我在存儲svg時，勾選了畫板，所有文件名后綴都有-01，后面下載的字體庫都有后綴，被程序猿diss，所以大家想輸出畫板尺寸，就把名稱后綴都刪了)

圖標導入iconfont-1

2.第二個坑，線條缺失。因為在制作圖標時，我運用到了線條和面積，在存儲svg后，導入iconfont就出現問題，因為這些制作字體庫的網站只識別面，線條就沒了。為了避免這個問題，在做好圖標后，要選中所有線和面，然后點擊對象>>擴展，擴展勾選填充就好；

上傳后圖標

圖標原圖

圖標對像擴展

擴展后上傳圖標

3.第三個坑，填充顏色發現形狀沒有連接成一體。

填充顏色

原因是因為我的這兩個圓角是用兩個圓形拼接的。在做圖標時，只要存在面結拼接的，都要在擴展之后，把要合并的面積選中，點擊左側工具欄里的形狀生成器工具，對比圖里左邊是連接的，右邊是沒有連接的

形狀生成器

對比圖

4.第四個坑，是圓角矩形上傳后變成直角矩形。我還不知道原因，目前的克服方式就是用圓形去代替本身的圓角，如果有人知道更好的方法，可以聯系我，共同分享。

5.當圖標上傳好了，懸停會有購物車圖標，就可以在網站點擊購物車那個圖標，然后建立自己的項目，在自己的項目里點擊下載至本地。然后把文件給程序員就可以了。

四、字體庫的運用

我之前使用sketch時，圖標使用的網站是glyph search,這個網站的圖標在skrtch里我可以改變圖標大小和顏色。但是這個網站里的圖標是別人的，不如用自己的圖標來的合適。所以我們找到使用自己上傳的圖標作為字體庫的方法。還可以團隊共享。

第一步，進入iconfont我的項目，將想要的用的圖標放進一個項目，下載至本地；

第二步，打開文件包，安裝字體；

文件包安裝字體

第三步，字體安裝成功之后，打開demo_unicode.html這個鏈接，選擇你要的圖標進行復制，再打開sketch，直接粘貼

文件包打開unicode鏈接

粘貼之后，會得到一個?文件，在字體那里找到iconfont字體，顏色和字號都可以進行修改

sketch圖標顯示-1

sketch圖標顯示-2

六、總結

首先希望大家看到這篇關于字體庫的文章后能夠有所幫助，然后發現我有錯誤的地方，聯系我，diss我。畢竟一個人力量有限，希望大家一起進步。