什麼是Iconfont？介紹Iconfont的好處及使用

下圖是前一陣同事在taobao網按F12後得到的驚喜：

什麼是Iconfont？介紹Iconfont的好處及使用

看過此圖你是否有一絲失落呢！騷年，不打緊的，奮起直追吧！

看過此表，我想說說Iconfont這個東東，單純靠第一感覺，我想到的是 Iconfont == Icon + font？

實際結果如同我們想的，將icon和font結合就是Iconfont，這個技術相對來說算是比較成熟的了

• 國內可以看阿里媽媽圖標庫

• github上也有一個熱門的項目在這裡，

• 還有一個網站可以在線製作自己的圖標集fontello，最終會生成對應的css文件和字體文件，並且還提供呢針對IE瀏覽器的支援

Iconfont的好處是什麼呢？

1. 自由變化大小

2. 自由修改顏色

3. 可以加入一些視覺效果如：陰影、旋轉、透明度。

4. 相容IE6

上面的幾點是不是完敗原始的icon，缺點也有就是色彩過於單調，是純色的。

下圖是font-awesome的css檔案裡面的部分內容，從名字來看像是icon的定義，但是\f002 \f003這些內容到底什什麼東西呢？使用字型編輯軟體開啟下載下來的字型檔案後你就明白了。

font-awesome css 檔案內容

icon對應的編碼

哈哈，有沒有覺得這個想法很讚！

怎麼使用自創的字體檔案呢

這裡要介紹的是@font-face，這個語句的瀏覽器相容性也很好，包括低版本的IE支援的也是很好。但是各個瀏覽器對於可用字體的相容就沒那麼友善了，這裡介紹了各瀏覽器對字體格式的支援情況
下面程式碼是font-awesome中的實作

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face 中有部分內容省略，原始碼在這裡可以看到，先是使用@font-face 定義了一種字體FontAwesome，然後再.fa中使用了FontAwesome字體

##【相關推薦】

1. 

免費css線上影片教學

#2. 

css線上手冊

3.

 php .cn獨孤九賤（2）－css影片教學

以上是什麼是Iconfont？介紹Iconfont的好處及使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！