字體圖標的便捷

字體圖標

圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因爲圖片放大和縮小會失真。 我們後面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。。 這就是字體圖標（iconfont)

字體圖標優點

• 可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等…
• 但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等…
• 本身體積更小，但攜帶的信息並沒有削減。
• 幾乎支持所有的瀏覽器
• 移動端設備必備良藥…

字體包

當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的。

icomoon字庫

IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。 內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

推薦網站： http://icomoon.io

阿里icon font字庫

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI製作圖標上傳生成。 最重要的是！！！一個字，免費，免費！！

http://www.iconfont.cn/

fontello

在線定製你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。

http://fontello.com/

Font-Awesome

Font Awesome 字體爲您提供可縮放矢量圖標,它可以被定製大小、顏色、陰影以及任何可以用CSS的樣式。 更新比較快。目前已經有369個圖標了。

http://fortawesome.github.io/Font-Awesome/

Glyphicon Halflings

這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。

http://glyphicons.com/

Icons8

提供PNG免費下載，像素大能到500PX

https://icons8.com/

字體圖標的使用

去剛纔的任意網站，做好字體下載字體包

聲明字體：

/*聲明字體  引用字體*/	
@font-face {  
	  font-family: "icomoon";  /*我們自己起名字可以*/
	  src:  url('fonts/icomoon.eot?7kkyc2');
	  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
	    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
	    url('fonts/icomoon.woff?7kkyc2') format('woff'),
	    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
	  font-style: normal;  /*傾斜字體正常*/
}
span {
    font-family: "icomoon"; /* 必須和聲明的字體名一致 */ 
}

使用字體：