什麼是iconfont?
iconfont就是字面上的意思,叫作「字體圖標」,將一套圖標集以字體文件的形式封裝,並經過 CSS 的 @font-face 做爲 Web Font 調用。css
iconfont的好處是什麼
衆所周知,以往咱們圖片大可能是用png。可是png在使用過程當中卻有衆多不變之處,譬如每一個圖片都是一個請求,當網頁圖片較多時,會比較影響加載的速度,不一樣分辨率的手機,爲了響應式的展現頁面,可能加有2倍圖、3倍圖等,使須要加載的資源變多,影響網頁的性能。html
那麼iconfont的好處有哪些呢:
- 輕量性:一個圖標字體比一系列的圖像(特別是在Retina屏中使用雙倍圖像)要小。一旦圖標字體加載了,圖標就會立刻渲染出來,不須要下載一個圖像。能夠減小HTTP請求,還能夠配合HTML5離線存儲作性能優化。每一個小圖標只有幾kb,大大節省了加載時間。
- 靈活性:圖標字體能夠用過font-size屬性設置其任何大小,還能夠加各類文字效果,包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。
- 兼容性:網頁字體支持全部現代瀏覽器,包括IE低版本。詳細兼容性能夠點擊這裏。
- 可縮放,能夠很方便的改變圖標的大小。不用擔憂不一樣分辨率的設備上展現差別問題。
- 矢量,iconfont 是矢量的而且具備獨立的分辨率,無論在高分辨率仍是低分辨率,無論是在網頁仍是手機端,都具備很好的展現效果,不會出現鋸齒或者馬賽克模糊。
如何使用iconfont
第一步:
下載所需圖標的svg文件瀏覽器

第二步
打開iconfont 點擊IcoMoon App,再點擊Import Icons 將剛纔下載的svg文件導入性能優化
第三步
選中以後 點擊Generate Fontsvg

第四步
點擊Download下載性能
上面完成了svg轉爲iconfont,你也能夠在iconfont下載本身本身所需的圖標字體字體
下面說一下如何引入到本身的項目中優化
- 將下載的icomoon文件解壓縮,將icomoon裏面的font文件夾放進項目的src/assets/ 目錄下,style.css放進src/assets/styles 目錄下
- 將style.css中對應的代碼路徑調整正確

- 在main.js中引入css:import './assets/styles/style.css'
- 在代碼中想引入對應圖標只需寫上style.css中對應的class名稱如

<span class="icon-add-people"></span>
注:如不清楚對應的類名,可參照下載包icomoon中的demo.html。在網頁中打開此文件便可。spa

