在網(wǎng)頁設(shè)計制作中，會經(jīng)常用到一些小圖標(biāo)來裝飾美化一些局部位置。但這些小圖標(biāo)有時候需要鼠標(biāo)放上去有顏色變化或者其它效果，而且經(jīng)常會需要背景色和圖標(biāo)顏色一起變動。這樣的話用圖標(biāo)會非常不方便。因為，如果使用圖標(biāo)只有兩種解決方案。一是用css樣式來把彩色圖片換成黑白的，當(dāng)鼠標(biāo)移動上去再變回原樣，這樣做法兼容性不高，而且經(jīng)常跟自己想要的顏色不一定完全一致。第二種就是使用兩個不同的圖片，兩種不同顏色的，需要顯示哪個用js來更換。但是，這兩種無論哪種，都不太好控制。做網(wǎng)站的都知道，字體圖標(biāo)使用時非常方便，直接引用一個樣式，就可以顯示一個圖標(biāo)，而且可以像設(shè)置普通文字那樣設(shè)置大小和顏色。今天，我們就為大家介紹一下，網(wǎng)頁制作如何把圖標(biāo)處理成字體使用。讓你在使用圖標(biāo)時可以更加方便控制。

圖標(biāo)處理成字體使用制作流程：

第一步：把一些圖片或圖案用photoshop摳圖，處理成png圖片（當(dāng)然，如果你會在Illustrator摳圖，可以省略這一步）。存檔時分辨率存大一點，一般超出512*512的png圖片才可以在 ai軟件中正常不顯示背景色。

第二步：打開AI軟件，然后點文件打開這個PNG文件，可以拖動出畫布外，看下這個png是不是沒有背景色。把圖片調(diào)整合適的大小。

第三步：選中這個圖片，點擊軟件中的圖像描摹，如果點擊后不顯示右邊的小窗口，可以在工具條上的窗口下，找到圖像描摹把前面打上對號。在右邊小窗口中選擇預(yù)設(shè)下邊的 “高保真度照片”（如下圖）





第四步：選擇工具欄中的擴展，點擊下后下圖




第五步：如上圖點擊完擴展的效果，就算是png圖片，那個圖片的周邊也會有藍色描邊，這樣的話如果直接存成svg（生成的圖標(biāo)按藍色描邊選擇的區(qū)域生成），那在生成ttf時會是一個黑色塊。所以要把白色沒用的部分去掉，分兩種方式，一種是用橡皮擦一點點擦除。但這樣一是麻煩，二是經(jīng)常有角落里擦除不到。所以用第二種方式。就是直接雙擊或點擊中間想要的區(qū)域，然后按 ctrl+x剪切到剪切板。再把剩余的部分選中刪除。然后再按ctrl+v粘貼過來。這樣就是自己想要的部分了。

第六步：存儲為.svg文件

第七步：打開 iconfont.cn網(wǎng)站并登錄（我是用自己的微博帳號登錄的），
1、點擊右上角 云彩（云朵） 小圖標(biāo)上傳
2、中間上選擇文件功能，選擇自己的.svg文件
3、選擇下邊保留顏色并生成
4、鼠標(biāo)移動到生成后的小圖標(biāo)上會有四個選項，點擊加入購物車選項
5、點擊右上角的購物車圖標(biāo)，選拔下邊的下載代碼。
6、代碼中有樣式文件、字體文件和.html示例代碼。

第八步：把字體文件直接放到自己的程序中使用即可。

北京網(wǎng)頁設(shè)計制作鵬飛網(wǎng)絡(luò)，專業(yè)定制開發(fā)網(wǎng)站，先做后付款，讓您的網(wǎng)站更滿意更優(yōu)秀。有任何需要歡迎來電咨詢。