1. 字體圖標

1.1 字體圖標的產生

字體圖標使用場景：主要用於顯示網頁中通用、經常使用的一些小圖標。css

精靈圖是有諸多優勢的，可是缺點很明顯。html

圖片文件仍是比較大的。
圖片自己放大和縮小會失真。
一旦圖片製做完畢想要更換很是複雜。

此時，有一種技術的出現很好的解決了以上問題，就是字體圖標 iconfont。前端

字體圖標能夠爲前端工程師提供一種方便高效的圖標使用方式，展現的是圖標，本質屬於字體。json

1.2 字體圖標的優勢

輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會立刻渲染出來，減小了服務器請求瀏覽器

靈活性：本質實際上是文字，能夠很隨意的改變顏色、產生陰影、透明效果、旋轉等
兼容性：幾乎支持全部的瀏覽器，請放心使用
注意：字體圖標不能替代精靈技術，只是對工做中圖標部分技術的提高和優化。

總結：服務器

若是遇到一些結構和樣式比較簡單的小圖標，就用字體圖標。
若是遇到一些結構和樣式複雜一點的小圖片，就用精靈圖。

使用步驟前端工程師

字體圖標是一些網頁常見的小圖標，咱們直接網上下載便可。所以使用能夠分爲：svg

字體圖標的下載
字體圖標的引入（引入到咱們html頁面中）
字體圖標的追加（之後添加新的小圖標）

1.3 字體圖標的下載

推薦下載網站：字體

icomoon 字庫 http://icomoon.io 推薦指數 ★★★★★

IcoMoon 成立於 2011 年，推出了第一個自定義圖標字體生成器，它容許用戶選擇所須要的圖標，使它們成一字型。該字庫內容種類繁多，很是全面，惟一的遺憾是國外服務器，打開網速較慢。優化

阿里 iconfont 字庫 http://www.iconfont.cn/ 推薦指數 ★★★★★

這個是阿里媽媽 M2UX 的一個 iconfont 字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可使用 AI製做圖標上傳生成。重點是，免費！

1.4 字體圖標的引入

下載完畢以後，注意原先的文件不要刪，後面會用。

把下載包裏面的 fonts 文件夾放入頁面根目錄下

字體文件格式

不一樣瀏覽器所支持的字體格式是不同的，字體圖標之因此兼容，就是由於包含了主流瀏覽器支持的字體文件。

1).TureType( .ttf )格式：.ttf字體是Windows和Mac的最多見的字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式：woff字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式：.eot字體是IE專用字體，支持這種字體的瀏覽器有IE4+；

4).SVG( .svg )格式：.svg字體是基於SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

在 CSS 樣式中全局聲明字體：簡單理解把這些字體文件經過css引入到咱們頁面中。必定注意字體文件路徑的問題

@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-weight: normal;
   font-style: normal;
 }

html 標籤內添加小圖標。

給標籤訂義字體。注意：務必保證這個字體和上面@font-face裏面的字體保持一致

span {
   font-family: "icomoon";
 }

1.5 字體圖標的追加

若是工做中，原來的字體圖標不夠用了，咱們須要添加新的字體圖標到原來的字體文件中。