confont 是指用字體文件取代圖片文件，來展示圖標、特殊字體等元素的一種方法。很多網(wǎng)站都會用它，比如手淘、新浪微博等。

在使用它之前，先來了解一下它的優(yōu)缺點：

優(yōu)點：（1）文件加載體積??；（2）可以直接通過css的font-size，color修改它的大小和顏色，對于需要縮放多個尺寸的圖標，是個很好的解決方案；（3）支持一些css3對文字的效果，例如：陰影、旋轉、透明度；（4）兼容低版本瀏覽器。

缺點：（1）矢量圖只能是純色的。（2）制作門檻高，耗時長，維護成本也很高。

使用Icon font

首先，在我們寫代碼之前我們需要得到圖標字體文件?，F(xiàn)在有兩種辦法提供大家參考。

1. 讓設計師設計矢量圖片然后通過工具直接轉換成相應的字體。

2. 使用第三方Iconfont 在線服務（例如： 阿里巴巴Iconfont平臺 ），然后直接上傳你自己設計的圖標矢量圖生成字體文件。

得到了字體文件之后我們就可以說一下如何使用它了。我們在CSS中像設置自定義字體一樣使用就可以。

font-face 字體聲明：　

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

可以看到，不同的瀏覽器調用不同的字體文件。

定義一下Iconfont 的樣式：

.iconfont {font-family:"iconfont" !important;font-size:16px;}

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

<i class="icon iconfont"></i>

接下面我們再來說說Iconfont在使用過程中可能遇到的各種坑。

1. 字體圖標在一些瀏覽器下會遇到被加粗的問題，設置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解決。

2.  跨域訪問不到字體，由于怕字體版權得不到保護，默認跨域的字體文件是訪問不到的，一般通過服務器設置 Access-Control-Allow-Origin指定自己需要的網(wǎng)站和設置同域來解決這個問題。

3.  不要包含沒有使用的@font-face，IE將部分他是否使用，統(tǒng)統(tǒng)加載下來。萬惡的IE。

4.  @font-face聲明之前，如果有script標簽的話，直到字體文件完成下載之前，IE將都不會渲染任何東西。

有興趣的同學可以去坑里面走一圈，自己試試坑的深淺。博主就介紹在這里，如果有錯誤還望大家指出，共同學習。

我之前因為項目用bootstrap比較多,所以使用font awesome字體圖標比較多,后來接觸到了iconfont,發(fā)現(xiàn)想要的什么圖標都有,還可以自定義圖標,非常強大!之前看了一波教程,覺得繁瑣,自己弄明白后感覺如此簡單,做了這么個簡單教程,直接上圖,簡單粗暴,避免新手走彎路,這里講解的默認是元素使用類名;

step 1:百度iconfont,找到阿里巴巴矢量圖標庫官網(wǎng),然后注冊登錄,或者用github登錄也行,此步驟跳過;

step 2:找到圖標管理->我的項目->然后新建項目:

右邊點擊新建項目,用于保存自己常用的圖標;

step 3:項目新建完成后,往項目里添加我們要想使用的圖標,找到圖標庫,搜索一個想要的圖標,然后添加到購物車;

 我現(xiàn)在將第一個安卓圖標加入我的項目,點擊加入購物車

step 4:添加到購物車完成后,購物車徽章數(shù)字應該顯示1了,點擊右上角的購物車圖標,選擇添加至項目,選擇我們剛剛創(chuàng)建的項目,確定;

自動跳轉到對應的項目里了,如圖:

step 5:接下來一部比較關鍵,將打包好的字體文件下載到本地添加到你的項目中,在項目中引用文件中的iconfont.css文件;

下載下來解壓后的文件如下:

強調一次,把上面這些文件都放在一個文件夾內，然后放在你的項目目錄中,再在你的項目中引入iconfont.css文件

step 6:到了最后一步了,如何在項目中使用字體圖標呢,其實很簡單,創(chuàng)建一個i標簽或者span標簽,添加兩個類名,一個固定的是iconfont,另一個是你想要的那個圖標對應的類名:

具體代碼如下:

好了,刷新頁面,圖標是不是出來了呢?

Ok,到這一步,恭喜你成功了,是不是很簡單,不簡單?那就從頭再看一遍;

調節(jié)字體圖標的大小是通過元素的font-size屬性來控制的;