@font-face 字體圖標的應用

所謂字體圖標，顧名思義就是圖標以字體的形式存在，能夠利用 font-size、color 對字體圖標的大小和顏色進行渲染。將小圖標集中放到字體庫裏，利用css3 @font-face 引用圖標，不只有利用圖標的集中化管理，也有利於搜索引擎的優化。

圖標建議使用 iconfont.cn（阿里巴巴矢量圖標庫），該網站的一些功能給前端工做提供了不少方便。在該網站的代碼應用頁面講解了圖標在web端的使用，裏面涉及到三種引用方式，這篇文章將着重講解第二種方式——font-class引用。

1、font-class特色

在 iconfont.cn 裏是這樣介紹font-class的特色的：

• 兼容性良好，支持ie8+，及全部現代瀏覽器。
• 相比於unicode語意明確，書寫更直觀。能夠很容易分辨這個icon是什麼。
• 由於使用class來定義圖標，因此當要替換圖標時，只須要修改class裏面的unicode引用。
• 不過由於本質上仍是使用的字體，因此多色圖標仍是不支持的。

2、font-class使用

一、登陸 iconfont.cn ，方便管理項目。

二、搜索圖標名，如「首頁」，選擇一個圖標，點擊「添加入庫」。如圖：

 

三、點擊右上角購物車圖標，進入已選圖庫。如圖：

四、選擇「添加至項目」，若是沒有項目就先添加一個項目，而後選擇一個項目，點擊「肯定」。如圖：

五、肯定以後進入個人項目頁面，能夠看到引用方式默認是Font class, 點擊「下載至本地」，將壓縮包下載到本地。

六、下載後的文件目錄如圖：

對於咱們目前來講，有用的文件只有：

編輯器打開iconfont.css文件：

解釋一下這個文件內容：

(1)@font-face 引用四種格式的字體圖標文件，目的是爲了兼容不一樣瀏覽器；

(2).iconfont 全部圖標的公共樣式；

(3).icon-shouye 「首頁」圖標的引用類名；

再來看一下html文件是怎麼引用圖標的：

一目瞭然，紅色框裏的就是引用首頁這個圖標的方法。so，引用圖標時，都要有.iconfont這個公共樣式類名，再有就是這個圖標的引用類名。

瀏覽器運行html文件，「首頁」圖標就渲染到了頁面上。經過樣式更改color、font-size，圖標的顏色、大小就會發生變化。如圖：

3、編輯圖標

鼠標移入圖標上，顯示4個圖標按鈕，分別是 添加入庫、編輯圖標、刪除圖標、下載圖標，點擊 編輯圖標，進入圖標詳情彈框：

講解：(1)調整圖標大小

　　　(2)編輯圖標名稱

　　   (3)編輯圖標字符編碼（有默認編碼）

4、添加圖標

往項目裏添加新圖標的方法和上面說的步驟同樣，有幾點須要說明一下。

一、將壓縮包下載到本地後，只須要把其中的 iconfont.css、.eot、.svg、.ttf、.woff五個文件替換掉以前的文件便可。

二、iconfont.css的內容也能夠經過輸入連接查看：

點擊紅字獲取新連接，瀏覽器打開連接，複製新圖標代碼，再粘貼到iconfont.css文件裏到便可。如圖：

5、小結

一、編輯圖標，調整圖標大小至容器的邊框，這樣是爲了當圖標字體大小同樣時，顯示在頁面上的圖標大小同樣。（以前項目的經驗：兩個圖標font-size值同樣，顯示在頁面上卻不同大小，後來調整了圖標的大小才解決了問題）

二、當圖標不少時，爲了方便查找圖標代碼，能夠將圖標代碼按字母表排列。如圖：

 

 

歡迎留言~