1.Iconfont是什么式镐？
Iconfont 顧名思義，它是一種字體奋蔚，只不過(guò)這個(gè)字體顯示的并不是具體的文字之類(lèi)的，而是各種圖標(biāo)。它的原理就是將很多 icon 做成字體庫(kù)泊碑，通過(guò)樣式或者字體對(duì)應(yīng)的字符集來(lái)顯示這個(gè) icon坤按。
目前比較流行的iconfont字體庫(kù)有阿里的iconfont。
為什么很多項(xiàng)目從圖片替換成iconfont了呢馒过？
接下來(lái)看看Iconfont 的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
- 減少請(qǐng)求次數(shù)臭脓，將多個(gè) icon 合并到一個(gè)字體文件中，從而提高網(wǎng)頁(yè)性能沉桌；
- 可以動(dòng)態(tài)調(diào)整圖標(biāo)大小谢鹊、顏色等等，因?yàn)樽煮w是可以通過(guò)樣式來(lái)設(shè)置大小和顏色的留凭；
- 矢量圖不失真佃扼；
- 文件加載體積小蔼夜；
- 適合多平臺(tái)（瀏覽器兼耀、iOS App、Android App）求冷；
缺點(diǎn)：
- 單色
- 維護(hù)成本高
2.如何在 HTML中使用圖標(biāo)字體
以阿里的iconfont圖標(biāo)庫(kù)為例：
步驟一.找到阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng),然后注冊(cè)登錄
步驟二.找到圖標(biāo)管理->我的項(xiàng)目->然后新建項(xiàng)目
點(diǎn)擊如下按鈕瘤运，新建一個(gè)項(xiàng)目用于存放自己常用的圖標(biāo)
步驟三.往項(xiàng)目里添加我們想要的圖標(biāo)
搜索想要的圖標(biāo)
鼠標(biāo)移到對(duì)應(yīng)的圖標(biāo)上面，加入到購(gòu)物車(chē)
步驟四.添加至購(gòu)物車(chē)后匠题，購(gòu)物車(chē)上面顯示對(duì)應(yīng)的數(shù)量拯坟，點(diǎn)擊購(gòu)物車(chē)加入到項(xiàng)目
步驟五.在頁(yè)面中引入生成的字體文件（分為2種，一種是直接引用線上的地址韭山，另一種是將字體文件下載到本地）
1.直接引用線上的地址
點(diǎn)擊"暫無(wú)代碼郁季，點(diǎn)此生成"
此時(shí)，點(diǎn)擊"點(diǎn)此復(fù)制代碼"或者直接復(fù)制下面的鏈接钱磅，將鏈接引入到html文件中
此時(shí)查看頁(yè)面梦裂，圖標(biāo)已經(jīng)顯示出來(lái)了
2.將字體文件下載到本地，在頁(yè)面中引用文件中的iconfont.css文件
下載后的文件如下：
將這些文件放入同一個(gè)目錄中盖淡，然后在頁(yè)面引入iconfont.css
此時(shí)查看頁(yè)面年柠，圖標(biāo)已經(jīng)顯示出來(lái)了
以上就是阿里巴巴矢量圖標(biāo)庫(kù)-iconfont的使用，另外根據(jù)項(xiàng)目需求也可以生成自己的圖標(biāo)字體褪迟，也就是將svg圖片轉(zhuǎn)換為圖標(biāo)字體冗恨，具體可參考https://icomoon.io/app/#/select
