圖標字體(IconFont)製做

圖標字體(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/

上面兩種方法優勢是方便快捷，但或許有時候並不能知足你的個性化需求。
好比：僅須要替換一個已經有圖標並保持字符代碼不變或者更多個性化需求的，或許你能夠看看下面的方法。

三. 字體編輯軟件製做

1. 首先準備一下軟件，除了PS，AI，還須要High-Logic FontCreator。 FontCreator 是一個強大的字體編輯軟件。 官網下載：http://www.high-logic.com/font-editor/fontcreator/download.html

2. PS導出圖標路徑到AI (圖標必定要是路徑)
   

3. AI打開導出的圖標路徑（打開有多是空白，能夠全選找到並添上顏色）
   

4. 打開FontCreator，新建或打開字體
   

5. 添加圖標字形或者雙擊要編輯的圖標字形
   

6. 從AI裏複製圖標路徑到FontCreator裏，調整大小位置可參考(http://mux.alimama.com/posts/1025)
   

7. 導出字體，只有TTF和WOFF兩種格式
   

8. 去EverythingFonts把TTF轉換SVG和EOT， TTF2SVG TTF2EOT
   

9. 好了，收工。