點陣圖在圖片放大的時候會出現(xiàn)模糊現(xiàn)象，矢量圖則不會。因此越來越多人開始使用矢量圖來作為網(wǎng)頁圖標。很多人會遇到這樣的一種情況，就是自己去網(wǎng)站下載了一個帶了一些矢量圖圖標的字體文件，在后期開發(fā)中，圖標需要不斷的更新和增加，如果繼續(xù)下載ttf字體文件，則很占空間，會出現(xiàn)為了增加一個圖標，下載好幾個文件的情況。下面呢，我會為大家講解如何在原有的字體文件上添加圖標。

首先我先推薦兩個有矢量圖標庫的網(wǎng)址

阿里巴巴矢量圖標庫http://iconfont.cn/

谷歌瀏覽器里的矢量圖庫https://icomoon.io/

第一部分，介紹如何找到自己需要的圖標

首先，進入網(wǎng)頁：阿里巴巴矢量圖標庫http://iconfont.cn/

在搜索框內(nèi)輸入需要的圖標名稱，比如說“主頁”、“攻略”，確認。

找到自己需要的圖標，鼠標移上去，選中左下角的“購物框”

右上角的“儲存架”，會出現(xiàn)一個已收藏的圖標

再搜索“攻略”，找到圖標，放到“儲物架”。

點擊“登錄”，選擇一種登錄方式

現(xiàn)在將鼠標移到“儲物架”儲，點擊“存儲為項目”，點擊“存儲”

第二部分，是介紹如何將前面的圖標添加到已有的字體文件

現(xiàn)在找到我們已經(jīng)有的字體文件“new-iconfont.ttf”,用“fontlab”軟件打開文件

打開后就可以看到ttf字體文件里的圖標，每個圖標都有自己的Unicode編碼，因為每個圖標的Unicode相當于自身的“身份證”，外部文件需要使用里面的圖標時，需要使用這張“身份證”。

雙擊其中一個圖標，即可清晰的看到圖標上面的“Unicode”，這張圖標則是“E808”

在了解ttf字體文件本身已有的Unicode編碼后，如果在阿里巴巴圖庫的已選圖標的Unicode編碼與其中有重復(fù)，則點擊左下角的修改按鈕，進行修改

確認修改后，點擊“下載到本地”，解壓，會出現(xiàn)幾個字體文件，和css文件

現(xiàn)在可以用Fontlab軟件，打開里面的ttf文件

選中自己需要添加的兩個圖標，點擊鼠標右鍵中的“copy”。然后返回之前已有的字體的文件

選中最后的圖標用右鍵選中“Append Glyphs”,將需要的圖標添加進去

到這里就添加完了，使用快捷鍵Gtrl+Alt+G,保存為ttf文件

以上就是小編為大家?guī)淼娜绾卧诰W(wǎng)頁制作中給網(wǎng)頁字體文件增加矢量圖標的全部內(nèi)容，希望對大家有所幫助，更多內(nèi)容請繼續(xù)關(guān)注腳本之家

最新評論