首先說明，我是web前端開發(fā)的新手挤安，高手忽噴！丧鸯。最近開發(fā)一個(gè)微信商城，要用到很多圖標(biāo)嫩絮，之前我都是用@×2雪碧圖剿干。但在PC上還好，到手機(jī)上總感覺不清晰有點(diǎn)模糊杠步。有的時(shí)候也用過文字圖標(biāo)榜轿，之前用的都是bootstrap 的Font Awesome（http://www.bootcss.com/p/font-awesome/）。但Font Awesome 上都是一些常用的圖標(biāo)甸私，如果公司設(shè)計(jì)自己畫了一些圖標(biāo)飞傀，而且必須讓你在頁面上使用這些圖標(biāo)怎么辦。我之前的話都是做成@×2的雪碧圖弃鸦，前面已經(jīng)說過了幢痘，在手機(jī)上不是很清晰雪隧，會(huì)有一點(diǎn)模糊。如果拿來做微信頁面底部菜單選項(xiàng)圖標(biāo)的話藕畔，你在chrome手機(jī)模式下看的話庄拇，還可以韭邓。但拿到手機(jī)上女淑，模糊了辜御。雖然不是很明顯，仔細(xì)看的話袱巨，還是能看的出來圖標(biāo)周圍是有毛邊的愉老。而且有一個(gè)不爽的地方在于剖效，一般圖標(biāo)大多都有選中狀態(tài)，會(huì)有高亮咒林，這樣的話映九，每個(gè)圖標(biāo)你至少都得做兩個(gè)瞎颗，一個(gè)默認(rèn)的，一個(gè)選中后的高亮引有。萬一哪天高亮色要改了倦逐，那是不是又得重做圖標(biāo)檬姥。好了，不說廢話了抒巢，接下來我總結(jié)一下蛉谜，使用雪碧圖和文字圖標(biāo)的優(yōu)缺點(diǎn)，看完不明白的你客燕，就全部明白了狰贯。
優(yōu)勢(shì)：
1饼疙、一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小壁袄。一旦圖標(biāo)字體加載了恨憎，圖標(biāo)就會(huì)馬上渲染出來塘幅，不需要下載一個(gè)圖像尿贫。可以減少HTTP請(qǐng)求匾乓，還可以配合HTML5離線存儲(chǔ)做性能優(yōu)化拼缝。
2彰亥、靈活性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小任斋，還可以加各種文字效果，包括顏色瘟檩、Hover狀態(tài)澈蟆、透明度丰介、陰影和翻轉(zhuǎn)等效果鉴分≈菊洌可以在任何背景下顯示垛叨。使用位圖的話嗽元，必須得為每個(gè)不同大小和不同效果的圖像輸出一個(gè)不同文件。
3淤翔、兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器旁壮，包括IE低版本谐檀。詳細(xì)兼容性可以點(diǎn)擊這里
除了以上優(yōu)勢(shì)之外桐猬，當(dāng)然也有劣勢(shì)
劣勢(shì)：
1溃肪、圖標(biāo)字體只能被渲染成單色或者CSS3的漸變色，由于此限制使得它不能廣泛使用杜秸。
2润绎、使用版權(quán)上有限制莉撇，有好多字體是收費(fèi)的。當(dāng)然也有很多免費(fèi)開源的精美字體圖標(biāo)供下載使用其障。
3励翼、創(chuàng)作自已的字體圖標(biāo)很費(fèi)時(shí)間，重構(gòu)人員后期維護(hù)的成本偏高抓狭。
說了怎么多造烁，那么文字圖標(biāo)該怎么制作和使用呢惭蟋？要想獲取圖標(biāo)字體告组，不外乎兩種途徑，其一找到付費(fèi)網(wǎng)站購買持偏，其二就是到免費(fèi)網(wǎng)站下載氨肌，你百度一下文字圖標(biāo)怎囚，會(huì)有很多桥胞，找一個(gè)你喜歡的贩虾，我比較喜歡阿里巴巴的阿里巴巴適量圖標(biāo)庫圖標(biāo)很多。
制作和使用的方法也有好幾種伊群，這里我推薦利用css 偽類舰始，很方便咽袜，用的時(shí)候只需要給相應(yīng)的標(biāo)簽加類名就好了（具體使用方法后面再說）询刹。 首先說制作萎坷，你也可以在圖標(biāo)網(wǎng)站上下載哆档，也可以自己畫僧鲁。自己畫的話寞秃，也就是用可以保存SVG格式的工具，把你畫好的適量圖朗涩，保存成SVG格式就好了谢床。說一下在網(wǎng)站上下載吧厘线，這里就拿阿里的適量圖標(biāo)庫舉例
1造壮、百度搜索阿里巴巴適量圖標(biāo)
可以看到只打一個(gè)阿里巴巴適量耳璧，就已經(jīng)出來了 前三個(gè)都是。
2蹬昌、進(jìn)入圖標(biāo)庫皂贩，首頁很簡單昆汹，但看上去很cool有沒有筹煮。你想要什么樣的圖標(biāo)直接在搜索框里搜索就好了，比如這里我們輸入一個(gè)本冲，手機(jī)檬洞。中英文都是可以的 輸入phone也一樣。
你可以看多有很多手機(jī)的圖標(biāo)，左上角顯示的有數(shù)量 2832 個(gè)砾脑，然后找一個(gè)你滿意你點(diǎn)擊下載艾杏。
會(huì)有一個(gè)彈出框购桑，會(huì)有一些操作勃蜘，可以選顏色缭贡，下面有三個(gè)按鈕，也就是提供了三個(gè)下載格式，我們要做文字圖標(biāo)穆端，so 要選擇SVG格式下載仿便。 下載好以后嗽仪，把SVG格式的圖標(biāo)導(dǎo)入icomoon、fontello沽翔、Iconfont仅偎、字體生成器中橘沥，去生成所要的圖標(biāo)字體，方法都大同小異痢艺，我拿icmoon舉例
coMoon介陶！一個(gè)可以通過個(gè)性化設(shè)置來創(chuàng)建自定義圖標(biāo)（字體）的生成器斤蔓！IcoMoon是一項(xiàng)免費(fèi)的服務(wù)弦牡，通過使用不同設(shè)置使我們能夠創(chuàng)建自定義的Icon圖或Icon字體。除了自定義Icon外卸留，IcoMoon也有自己免費(fèi)的海量圖標(biāo)集耻瑟，都非常贊赏酥。打開地址裸扶，點(diǎn)擊Start the App按鈕呵晨。
點(diǎn)擊Import Icons按鈕導(dǎo)入SVG圖標(biāo)摸屠，導(dǎo)入后對(duì)圖標(biāo)進(jìn)行相關(guān)的操作，如選中檩咱、刪除税手、移動(dòng)、編輯等艺挪。
編輯完成后，就可以進(jìn)行下載了津坑，它提供兩種下載方式：圖片版和字體版傲霸！圖片版是經(jīng)過CSS Sprites技術(shù)處理的PNG格式昙啄，字體版有多種格式供我們選擇（EOT,SVG,WOFF,TTF）。
如果要兼容IE7以下瀏覽器，請(qǐng)?jiān)谠O(shè)置里勾選Support IE7(and older)選項(xiàng)淹接，會(huì)生成一個(gè)單獨(dú)JS叛溢、CSS文件楷掉。
下載ZIP包后靖诗，解壓后會(huì)得到如下圖的文件刊橘。將fonts文件夾復(fù)制到你的網(wǎng)站颂鸿，為項(xiàng)目添加字體。從style.css文件中復(fù)制CSS樣式浓冒，并粘貼到你網(wǎng)站的CSS文件中稳懒，也可以單獨(dú)存成一個(gè)樣式文件慢味。
復(fù)制完成后纯路，在CSS文件中找到@font-face驰唬，將URL路徑修改成你本地的相對(duì)路徑。
字體和路徑都設(shè)置完成后，在HTML頁面只需調(diào)用相對(duì)應(yīng)的class就可以了凌简。如果想兼容IE7瀏覽器恃逻，需引用IE7目錄的js寇损。
調(diào)用class：<span class="icon icon-add"></span>
調(diào)用js：<script src="ie7/ie7.js"></script>
其他兩種方法呢矛市，大同小異，你可以試試就知道了而昨，沒什么難點(diǎn)找田，我就不贅述了歌憨。
再說一下流程
1、制作SVG（可以自己畫墩衙、如果有特殊要求的話务嫡。也可以去圖標(biāo)網(wǎng)站上下載）圖標(biāo)
2甲抖、將做好的SVG圖標(biāo)導(dǎo)入字體圖標(biāo)生成器中，編輯好心铃，下載font格式准谚。
3、解壓去扣，將fonts文件夾，和style.css（可以全部粘貼出來愉棱，名字建議使用font-icon.css）放入項(xiàng)目中使用秀存。
生成圖標(biāo)字體，加上用CSS對(duì)其大小羽氮、顏色或链、透明度、陰影档押、Transition各種變換等控制澳盐，不僅可以縮放自如，制作出各種特殊效果令宿，而且還很容易維護(hù)叼耙，可以通過多種不同的途徑對(duì)它們進(jìn)行操作。相信大家已經(jīng)體驗(yàn)到他的強(qiáng)大之處粒没，滿足日常工作需要應(yīng)該已經(jīng)足夠了筛婉。雖然有這么多優(yōu)點(diǎn)，但圖標(biāo)字體并不是完美的癞松，也存在些缺點(diǎn)爽撒。如：只能被渲染成單色的問題、屏幕閱讀器(雖然有解決方法响蓉，但并不完善)的問題硕勿、性能問題等等， 等待著我們?nèi)グl(fā)現(xiàn)和解決枫甲。相信未來會(huì)有更好的解決方案源武，比如：SVG（可伸縮矢量圖形），未來可能取代位圖的圖形技術(shù)等想幻。
立足現(xiàn)在粱栖，放眼未來。最后對(duì)目前的圖標(biāo)字體生成器工具做一下展望吧脏毯！
■ 能夠支持導(dǎo)入更多的自定義格式闹究，如EPS、AI等格式抄沮。
■ 能夠引入項(xiàng)目管理的機(jī)制跋核， 在同一帳號(hào)可以同時(shí)管理多個(gè)項(xiàng)目圖標(biāo)。
■ 提供更多免費(fèi)叛买、豐富的圖標(biāo)字體供下載使用砂代。
FAQ
1、跨域問題：
（1）通過配置自己的服務(wù)器率挣。
# For Apache
Header set Access-Control-Allow-Origin "*"
# For nginx
location ~* \.(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
（2）放在同一個(gè)域下刻伊。
（3）使用base64置入CSS中(Icomoon在導(dǎo)出圖標(biāo)時(shí)，設(shè)置里勾選Encode & Embed Font in CSS選項(xiàng))椒功。
2捶箱、字體圖標(biāo)出現(xiàn)鋸齒的問題：
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
3、@font-face與性能：
關(guān)于@font-face的性能問題动漾，可以參考以下文章丁屎。
原文地址：http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
翻譯地址：http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
文章內(nèi)的建議和總結(jié):
（1）只在你確定你非常需要 @font-face的時(shí)候才使用它;
（2）將你的@font-face定義在所有的script標(biāo)簽前;
（3）如果你有許多字體文件，考慮將它們分散到幾個(gè)域名下;
（4）不要包含沒有使用的 @font-face聲明——IE將不分它使用與否旱眯，通通加載;
（5）Gzip字體文件晨川，同時(shí)給它們一個(gè)未來的過期頭部聲明;
（6）考慮字體文件的后加載，起碼對(duì)于IE删豺。
參考文章：
