聊聊Iconfont

1、前言

提及Iconfont，對大多數人來講可能不是什麼新的技術了，如今好多大網站已經開始使用Iconfont。博主今天主要是簡單說一下它的使用方法，聊聊使用它時可能遇到哪些坑，不熟悉的同窗能夠簡要看一下，資深瞭解的同窗，若是發現問題，還請指正。

 

2、什麼是Iconfont

有的同窗可能會問什麼是Iconfont ？

其實，Iconfont 就是指用字體文件取代圖片文件，來展現圖標、特殊字體等元素的一種方法。

那麼哪些網站在用它呢？有什麼優缺點？以及如何使用它，接下來咱們一一解答這幾個問題。

首先讓咱們來看看都哪些網站使用了Iconfont 。

 

淘寶用到的地方

  

 

 

新浪微博用到的地方

還有像豆瓣，一淘，想玩等網站也都用到了它，我就不一一粘結圖出來了，有興趣的同窗能夠去瞧一瞧。

 

看完別人用到的地方，你們是否是也開始躍躍欲試了呢？

不過在具體說使用它以前，還需瞭解一下Iconfont 有什麼優缺點，到底適不適合咱們在項目中使用。

先來看看優勢：

1. 加載文件體積小。
2. 能夠直接經過css的font-size，color修改它的大小和顏色，對於須要縮放多個尺寸的圖標，是個很好的解決方案。
3. 支持一些css3對文字的效果，例如：陰影、旋轉、透明度。
4. 兼容低版本瀏覽器。

不過它也有侷限性，不能做爲css sprite的替代品，咱們來看看缺點：

1. 矢量圖只能是純色的。
2. 製做門檻高，耗時長，維護成本也很高。

看到這些優缺點以後，咱們能夠決定它是否能夠直接在咱們的項目中使用 , 不論咱們的項目是否可使用它，都不妨礙咱們去了解它， 接下來咱們來看一下如何使用它。

 

3、使用Iconfont

首先，在咱們寫代碼以前咱們須要獲得圖標字體文件。如今有兩種辦法提供你們參考。

1. 讓設計師設計矢量圖片而後經過工具直接轉換成相應的字體。
2. 使用第三方Iconfont 在線服務（例如： 阿里巴巴Iconfont平臺 ），而後直接上傳你本身設計的圖標矢量圖生成字體文件。

獲得了字體文件以後咱們就能夠說一下如何使用它了。咱們在CSS中像設置自定義字體同樣使用就能夠。

 

font-face 字體聲明：　　　

1 @font-face {font-family: "iconfont";
2   src: url('iconfont.eot'); /* IE9*/
3   src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
4   url('iconfont.woff') format('woff'), /* chrome, firefox */
5   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
6   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
7 }

咱們看到，不一樣的瀏覽器調用不一樣的字體文件。

 

定義一下Iconfont 的樣式：

1 .iconfont {
2   font-family:"iconfont" !important;
3   font-size:16px;
4 }

 

咱們能夠經過字體的大小font-size和自體顏色color改變圖標的大小和顏色。示例圖以下：

    

 

挑選圖標對應的字體編碼，應用於頁面中：

<i class="icon iconfont">&#xe60e;</i>

 

接下面咱們再來講說Iconfont在使用過程當中可能遇到的各類坑。

1. 字體圖標在一些瀏覽器下會遇到被加粗的問題，設置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解決。
2.  跨域訪問不到字體，因爲怕字體版權得不到保護，默認跨域的字體文件是訪問不到的，通常經過服務器設置 Access-Control-Allow-Origin指定本身須要的網站和設置同域來解決這個問題。
3.  不要包含沒有使用的@font-face，IE將部分他是否使用，通通加載下來。萬惡的IE。
4.  @font-face聲明以前，若是有script標籤的話，直到字體文件完成下載以前，IE將都不會渲染任何東西。

有興趣的同窗能夠去坑裏面走一圈，本身試試坑的深淺。博主就介紹在這裏，若是有錯誤還望你們指出，共同窗習。

 

 

 

 

本博客文章皆爲原創，未盡許可，請勿轉載 （http://www.cnblogs.com/song-song/p/5212706.html）