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

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

阿里巴巴矢量圖標(biāo)庫http://iconfont.cn/

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

第一部分，介紹如何找到自己需要的圖標(biāo)

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

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

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

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

再搜索“攻略”，找到圖標(biāo)，放到“儲物架”。

點(diǎn)擊“登錄”，選擇一種登錄方式

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

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

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

打開后就可以看到ttf字體文件里的圖標(biāo)，每個(gè)圖標(biāo)都有自己的Unicode編碼，因?yàn)槊總€(gè)圖標(biāo)的Unicode相當(dāng)于自身的“身份證”，外部文件需要使用里面的圖標(biāo)時(shí)，需要使用這張“身份證”。

雙擊其中一個(gè)圖標(biāo)，即可清晰的看到圖標(biāo)上面的“Unicode”，這張圖標(biāo)則是“E808”

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

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

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

選中自己需要添加的兩個(gè)圖標(biāo)，點(diǎn)擊鼠標(biāo)右鍵中的“copy”。然后返回之前已有的字體的文件

選中最后的圖標(biāo)用右鍵選中“Append Glyphs”,將需要的圖標(biāo)添加進(jìn)去

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

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