圖標字體(IconFont)介紹
圖標字體(IconFont)現在越來越被廣泛使用，大大提高了網頁的多樣化，解決了視網膜屏幕失真的問題。 據說微軟從IE4開始支持的這個私有方法(@font-face)，后來W3在CSS2中也引入這個方法，但是后來CSS2.1又被刪除了，真是遺憾。直到CSS3，又一次引入，這真是個好消息。
詳細見：http://www.w3.org/TR/css3-fonts/。
不過經常會被問到，移動端用沒問題，PC上IE可以了，我可以負責任的說：當然可以。原因上面說了，@font-face最初是微軟IE里的私有方法，所以從IE4開始已經支持（我沒測過哦），不過現在網站最低支持到IE6而且IE6已被優雅降級到可以正常瀏覽、使用網站，UI還原度已不值得花大力度去做兼容了，況且在實際項目中IE6中使用確實是沒問題的。
一句話，現在可以放心大膽的在PC、移動端使用圖標字體(Iconfont)了。
了解更多可看國內最大最全的適量圖標庫阿里IconFont網站。
圖標字體(Iconfont)制作
一. IcoMoon
這個教程一搜一大把，是很方便快捷的一種方式，提供上傳、編輯或者選擇IcoMoon-Free下載可以直接拿來用了。
網址：https://icomoon.io/app/
二. 阿里IconFont
和IconFont提供類似功能
網址：http://iconfont.cn/
上面兩種方法優點是方便快捷，但或許有時候並不能滿足你的個性化需求。
比如：僅需要替換一個已經有圖標並保持字符代碼不變或者更多個性化需求的，或許你可以看看下面的方法。
三. 字體編輯軟件制作
-
首先准備一下軟件，除了PS，AI，還需要High-Logic FontCreator。 FontCreator 是一個強大的字體編輯軟件。 官網下載：http://www.high-logic.com/font-editor/fontcreator/download.html
-
PS導出圖標路徑到AI (圖標一定要是路徑)
-
AI打開導出的圖標路徑（打開有可能是空白，可以全選找到並添上顏色）
-
打開FontCreator，新建或打開字體
-
添加圖標字形或者雙擊要編輯的圖標字形
-
從AI里復制圖標路徑到FontCreator里，調整大小位置
可參考(http://mux.alimama.com/posts/1025)
-
導出字體，只有TTF和WOFF兩種格式
-
去EverythingFonts把TTF轉換SVG和EOT， TTF2SVG TTF2EOT
-
好了，收工。