大家好胰蝠，我是IT修真院鄭州分院第三期的學(xué)員高雪峰歼培，一枚正直震蒋、純潔、善良的前端程序員
今天給大家分享一下躲庄，修真院官網(wǎng)CSS任務(wù)5查剖，深度思考中的知識點——icon font的使用
1.背景介紹
最近在做的事情中，由于小圖標(biāo)比較多噪窘，查看了一下ui圖笋庄，發(fā)現(xiàn)大部分也是用的矢量圖，但是切出來添加到頁面之后倔监，發(fā)現(xiàn)顯示效果并不理想直砂，在正常的pc端還會有鋸齒，圖片有些失真浩习。又因為小圖標(biāo)比較多静暂，起初打算使用雪碧圖進(jìn)行處理，后來換了想法谱秽，找到了iconfont這樣的一個圖標(biāo)庫洽蛀。也就是今天要跟大家分享的小課堂的內(nèi)容。接下來詳細(xì)介紹一下疟赊。
2.知識剖析
2.1什么是iconfont郊供？
iconfont，字體圖標(biāo)近哟。通過使用字體格式的矢量圖標(biāo)來代替以往的圖片格式的小圖標(biāo)驮审。字體是矢量化圖形，它天生具有「分辨率無關(guān)」的特性吉执，在任何分辨率下面疯淫，都可以做到完美縮放和擴大，不會像傳統(tǒng)圖片一樣鼠证，增大到一定程度就會出現(xiàn)明顯的鋸齒或者變得模糊峡竣，影響展示效果靠抑。
2.2 如何使用icon font量九？
提供icon font的網(wǎng)站有很多，例如阿里巴巴矢量圖標(biāo)庫颂碧、fontello荠列、icomoon、Font-Awesome载城、Glyphicon Halflings肌似、Icons8。
我們今天主要就國內(nèi)使用最多的阿里巴巴矢量圖標(biāo)庫進(jìn)行介紹诉瓦。
在阿里巴巴矢量圖標(biāo)庫中川队，在web端有四種主要的引用方式力细，分別是icon單個使用、unicode引用固额、font-class引用眠蚂、symbol引用。
（1）icon單個使用斗躏，特點是適合用在圖標(biāo)引用特別少逝慧，以后也不需要特別維護(hù)的場景∽牟冢可以自行選擇下載不同的格式使用笛臣，包括png,ai,svg。
（2）unicode引用隧饼，批量引用的方法之一沈堡，在網(wǎng)頁端最原始的應(yīng)用方式。兼容性最好燕雁，支持ie6+踱蛀，及所有現(xiàn)代瀏覽器。支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小贵白，顏色等等率拒，由于是字體，所以不支持多色禁荒。只能使用平臺里單色的圖標(biāo)猬膨，就算項目里有多色圖標(biāo)也會自動去色。
（3）font-class引用呛伴，是unicode使用方式的一種變種勃痴，主要是解決unicode書寫不直觀，語意不明確的問題热康。支持ie8+沛申，及所有現(xiàn)代瀏覽器。相比于unicode語意明確姐军，書寫更直觀铁材。可以很容易分辨這個icon是什么奕锌。使用class來定義圖標(biāo)著觉，當(dāng)要替換圖標(biāo)時，只需要修改class里面的unicode引用就可以惊暴，比較方便饼丘。多色圖標(biāo)還是不支持的。
（4）symbol引用辽话，是一種全新的使用方式肄鸽，應(yīng)該說這才是未來的主流卫病，也是平臺目前推薦的用法。支持多色圖標(biāo)了典徘，不再受單色限制忽肛。支持 ie9+,及現(xiàn)代瀏覽器。瀏覽器渲染svg的性能一般烂斋，不如png屹逛。
3.常見問題
問題: 如何在項目中修改圖標(biāo)的大小和顏色？
4.解決方案
使用一個demo進(jìn)行演示講解：
demo：https://ptteng.github.io/PPT/demo/css-05-use%20iconfont/iconfontdemo.html
5.編碼實戰(zhàn)
參看以上demo中的演示汛骂，這里不再贅述罕模！
6.擴展思考
問題: iconfont相比于各種圖片格式的小圖標(biāo)的優(yōu)點和弊端？
優(yōu)點：
1帘瞭、由于是字體形式的淑掌，不是圖片，減少了http的請求蝶念；
2抛腕、顏色可以修改，大小也可以設(shè)置媒殉；
3担敌、可以像圖片一樣，進(jìn)行一些視覺上的效果設(shè)置：陰影廷蓉、旋轉(zhuǎn)全封、透明度；
弊端：
1桃犬、Icon Font 作為一種字體刹悴，Icon 顯示的大小和位置可能要受到font-size、line-height攒暇、word-spacing等等 CSS 屬性的影響土匀。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產(chǎn)生影響，調(diào)整起來很不方便形用。
2就轧、瀏覽器將其視為文字進(jìn)行抗鋸齒優(yōu)化，有時得到的效果并沒有想象中那么銳利尾序。
3钓丰、為了實現(xiàn)最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體文件每币。
7.參考文獻(xiàn)
參考一：分享國內(nèi)外免費開源的iconfont圖標(biāo)字庫：http://www.sucaijishi.com/2015/articles_1205/106.html
參考二: iconfont-矢量圖標(biāo)字體的運用：http://www.cnblogs.com/zzuIvy/p/iconfont.html
參考三：詳解CSS中iconfont的使用：http://www.jb51.net/css/365057.html
參考四：阿里巴巴矢量圖標(biāo)庫：http://www.iconfont.cn
8.更多討論
討論點：大家對iconfont還有哪些認(rèn)識和體會？
PPT鏈接：https://ptteng.github.io/PPT/PPT/css-05-use%20iconfont.html#/
視頻鏈接：https://v.qq.com/x/page/b0510bytugj.html
文本鏈接：http://www.jnshu.com/daily/24906?dailyType=others&total=134&page=2&uid=7446&sort=0&orderBy=3
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師琢歇，現(xiàn)在開始兰怠，找個師兄梦鉴，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏揭保，學(xué)習(xí)的路上不再迷梅食龋”。
這里是技能樹.IT修真院秸侣，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線存筏，學(xué)習(xí)透明化，成長可見化味榛，師兄1對1免費指導(dǎo)椭坚。快來與我一起學(xué)習(xí)吧~
你可以直接點擊此鏈接：http://jnshu.com/login/1/84959420
