1.字體格式 不同瀏覽器所支持的字體格式是不一樣的，我們有必要瞭解一下有關字體格式的知識。 1、TureType(.ttf)格式 .ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Oper ...
1.字體格式
不同瀏覽器所支持的字體格式是不一樣的，我們有必要瞭解一下有關字體格式的知識。
1、TureType(.ttf)格式
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+ iOS Mobile、Safari4.2+； 2、OpenType(.otf)格式 .otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+.Opera10.0+、iOS Mobile、Safari4.2+； 3、Web Open Font Format(.woff)格式 woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有IE9+. Firefox3.5+、Chrome6+、Safari3.6+Opera11.1+； 4、Embedded Open Type(.eot)格式 .eot字體是IE專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有IE4+； 5、SVG(.svg)格式 .svg字體是基於SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+； 瞭解了上面的知識後，我們就需要為不同的瀏覽器準備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過於在意字體格式間的區別差異。2.字體圖標
圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要 的是圖片不能很好的進行“縮放”，因為圖片放大和 縮 小會失真。 移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。這就是字體圖標（iconfont). 字體圖標優點 可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等..但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等.. . 本身體積更小，但攜帶的信息並沒有削減。 幾乎支持所有的瀏覽器 移動端設備必備良藥...3.字體圖標使用流程
1.設計字體圖標 假如圖標是我們公司單獨設計，那就需要第一步了，這個屬於UI設計人員的工作， 他們在 illustrator 或 Sketch 這類矢量圖形軟體里創建 icon圖標， 比如下圖：
之後保存為svg格式，然後給我們前端人員就好了。
其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大眾的，網上本來就有的，可以直接跳過第一步，進入第三步。
2.上傳生成字體包
當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件， 而且需要生成的是相容性的適合各個瀏覽器的。
推薦網站： http://icomoon.io
**icomoon字型檔**
IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。 內容種類繁多，非常全面,唯一的遺憾是國外伺服器，打開網速較慢。
**阿裡icon font字型檔** http://www.iconfont.cn/
這個是阿裡M2UX的一個icon font字體圖標字型檔，包含了淘寶圖標庫和阿裡圖標庫。可以使用AI製作圖標上傳生成。 一個字，免費，免費！！
**fontello** [http://fontello.com/](http://fontello.com/)
線上定製你自己的icon font字體圖標字型檔，也可以直接從GitHub下載整個圖標集，該項目也是開源的。
**Font-Awesome** [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/)
這是我最喜歡的字型檔之一了，更新比較快。目前已經有369個圖標了。
**Glyphicon Halflings** [http://glyphicons.com/](http://glyphicons.com/)
這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。
**Icons8** [https://icons8.com/](https://icons8.com/)
提供PNG免費下載，像素大能到500PX
