經過 font-awesome 案例來學習 css sprite 和 svg sprite

問題：font-awesome裏面的小圖標是怎麼產生的？

1. 打開瀏覽器調試工具，發現font-awesome user這個小圖標，其css樣式是.

   icon-user:before {
     content: "\f007";
   }
   [class^="icon-"]:before, [class*=" icon-"]:before {
     text-decoration: inherit;
     display: inline-block;
     speak: none;
   }

2. 根據css文件路徑，咱們打開font-awesome.css發現它是引用了css3 @font-face這個屬性。

   @font-face {
     font-family: 'FontAwesome';
     src: url('../font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
     font-weight: normal;
     font-style: normal;
   }

3. 咱們順着src：url（）找到其圖標svg

   其路徑爲url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
   咱們用sublime打開路徑下的svg圖,因爲SVG是 XML 格式，所以能夠支持一般用 XML 工具和庫進行的轉換和生成。具體的教程連接：XML 問題: 使用 SVG 編程

   <glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

4. 發現content：'\f007'對應的就是上文的unicode=「&#xfoo7」。

寫到這裏你們也許有點清晰了font-awesome裏的圖標是怎麼來的，不過仍是有點稀裏糊塗的，必定有不少問題會問：

svg圖是什麼？ 怎麼生成的？

把全部的圖標都作成一張svg圖片意義何在？它和css sprite有什麼區別呢？

哈哈，其實我和你們也同樣，很好奇，因而查看了不少文檔。原來早已經有大神研究過了。我會一一放上連接的，這裏我先談一下個人幾點認識

css-sprite

1. 先說什麼是css sprite？

css sprite又叫css精靈或css雪碧圖，是一種背景圖片的拼合技術。使用css雪碧圖，可以減小頁面的請求數、這個很關鍵，由於每個http請求都是長鏈接，咱們都知道http開銷是很大的，像一些購物網站，若是那麼多圖標都是標籤引入的，那後果不堪設想。css-sprite的設計就是提高頁面訪問速度和網站請求資源開銷的。

2. css-sprite實現的原理

css-sprite經過background-position這個css3新增屬性來實現.咱們能夠一次性引入圖片文件，經過設置background-size來切割小圖標，而後經過css-position來給具體的小圖標icon定位

3. 如何製做css-sprite

1.慕課網上有遠人老師的視頻，教你如何作一個css-sprite。傳送門：CSS Sprite雪碧圖應用
2.windows開發者能夠直接百度css-sprite製做工具，工具不少。
3.用sass編譯的同窗能夠直接使用compass自動合併css雪碧圖，教程連接地址
4.能夠用ps和AI人工拼圖

css-sprite缺點：拼圖和後期維護的成本比較大。

咱們能夠經過

svg sprite

這裏由於我瞭解的不是不少，並且我本人也是根據張鑫旭大神的技術博客學習的，因此直接貼地址：

將來必熱：SVG Sprite技術介紹

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

總結：

symbol + use => SVG Sprite。並且在HTML層面，圖標使用的代碼成本，跟傳統的CSS Sprite或者流行的font-face幾乎無異，代碼簡潔，並且很好維護。全部的SVG圖標都在一個SVG源上。retina良好，尺寸可任意拉伸，且顏色可控，真乃Web圖標的將來之星。