iconfont圖標應用

1、什麼是iconfont?

咱們如今一般所指的iconfont，是用字體文件取代圖片文件，來展現圖標、特殊字體等元素的方法。iconfont是阿里巴巴矢量圖標庫是由阿里巴巴體驗團隊傾力打造的中國第一個最大且功能最全的矢量圖標庫，提供矢量圖標下載、在線存儲、格式轉換等功能，是設計師和前端開發的便捷工具。

 

2、iconfont對於前端應用來講有不少便捷：

一、自由變化大小，並且還具備更好的可維護性（由於是矢量，因此拉伸不變形）；

二、體積小；

三、自由修改顏色，支持一些CSS3對文字的效果；

四、能夠添加一些視覺效果如：陰影、旋轉、透明度；

五、兼容IE6。

 

三、iconfont應用步驟：

一、首先在Iconfont-阿里巴巴矢量圖標庫上面將你須要的圖標點擊購物車按鈕加入「暫存架」；

 

 

 

二、選擇完全部要用的圖標後「存儲爲項目」，給它命名。而後在「項目圖標管理」-「個人項目」中找到這個項目，能夠獲取在線連接，可是在線會存在跨域問題，跨域是須要作些配置，因此通常下載到本地使用。

 

 

三、下載至本地並解壓後，會有這幾個文件，其中三個html文件就是字體圖標的三種使用方式的介紹，能夠直接打開文件在瀏覽器中展現demo能夠看到三種使用方式的差異，其中unicode的兼容性最好，支持ie6+，下面就來試試這種方式：

 

四、 新建一個項目文件和index.html，將上面有用的文件都放入font文件夾下：

      

 

 

五、 相應圖標並獲取字體編碼，應用於頁面，將圖標下的編碼直接複製到頁面：

<i class="icon  confont">&#xe61b;</i>

<i class="icon confont">&#xe60f;</i>

 

 

 

六、 在index.html的css中聲明字體，須要注意的是文件的路徑：

 

 

七、 在css中定義使用iconfont的樣式

 

 

八、 打開index.html，頁面中就會出現字體圖標了

 

 

四、iconfont常見問題：

1、字體圖標在safair或chrome瀏覽器下被加粗？

 

       以上現象是因爲字體圖標存在半個像素的鋸齒，在瀏覽器渲染的時候直接顯示一個像素了，致使在有背景下的圖標顯示感受加粗；因此在應用字體圖標的時候須要對圖標樣式進行抗鋸齒處理，CSS代碼設置以下：
.iconfont{-webkit-font-smoothing: antialiased;}

2、字體圖標在IE7瀏覽器顯示中圖標右側出現小方框現象；

 

出現以上現象能夠對引用字體圖標的非塊標籤進行如下CSS定義:

display: block;

3、字體圖標在pc端的chrome瀏覽器下出現嚴重的鋸齒；

 

出現以上現象能夠對字體圖標的邊緣進行模糊；（只支持webkit內核瀏覽器,參數數值不宜設置得很大，這會帶來圖標加粗的問題）
-webkit-text-stroke-width: 0.2px；

 iconfont官網地址：http://www.iconfont.cn/