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

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

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

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

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

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

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

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

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

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

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

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

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

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

打開(kāi)后就可以看到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編碼后，如果在阿里巴巴圖庫(kù)的已選圖標(biāo)的Unicode編碼與其中有重復(fù)，則點(diǎn)擊左下角的修改按鈕，進(jìn)行修改

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

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

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

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

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

以上就是小編為大家?guī)?lái)的如何在網(wǎng)頁(yè)制作中給網(wǎng)頁(yè)字體文件增加矢量圖標(biāo)的全部?jī)?nèi)容，希望對(duì)大家有所幫助，更多內(nèi)容請(qǐng)繼續(xù)關(guān)注腳本之家

最新評(píng)論