CSS高級技巧 圖標字體ICONFONT的使用方法視頻

圖標字體  iconfont

這是一種字體，它跟svg 有很大 類似點  
它是矢量的，放大縮小不失真的。很且很小。 咱們把它成字看來。
字體 在 從ie4就開始支持的。  兼容性很好
惟一麻煩的地方，就是製做麻煩。
愈來愈的網站開始運用這個圖標字體。 一些地方，咱們就不用精靈圖片，直接用圖標字體。

圖標字體的使用

本身製做比較麻煩，咱們通常是網上直接下載，所以，要使用iconfont字體一共分爲三步：

1. 先從網上下載字體。  
 
常用的兩個網站：

   icomoon.io            

   http://iconfont.cn/   阿里媽媽字體庫 
 
  咱們以icomoon.io 爲主
  
  打開網站點 ： icomoon App 按鈕

 

繼續 

 
 

 
 
 2. 聲明字體

這麼可能是爲了兼容瀏覽器，因此，你們只管複製就能夠了，看好路徑
@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#uxiconfont') format('svg'); /* iOS 4.1- */
 

 
3. 使用字體  
每一個圖片都會對應着一個文字，因此這個文字要記住。
例如：
 
先複製文字  在加  font-family

最後就能夠看到效果了。

具體完整操做，請參看視頻地址：

     http://www.tudou.com/programs/view/LaCdxBCcrrw/