東拼西湊完成一個後臺 」前端框架「 (2) - 字體圖標

　　還記得之前開發的項目目錄下都會存放一大堆圖標文件，難以維護，同時圖標和字體的對齊也是一個麻煩事兒；下面簡單列出字體圖標的優劣勢[摘自：http://www.javashuo.com/article/p-yvrehelt-ch.html]：

 

　圖標字體的優點和劣勢

　　優點

• 輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會立刻渲染出來，不須要下載一個個圖像。這樣能夠減小HTTP的請求數量，並且和HTML5的離線存儲配合，能夠對性能作出優化。
• 靈活性：不調字體能夠像頁面中的文字同樣，經過font-size屬性來對其進行大小的設置，並且還能夠添加各類文字效果，如color、hover、filter、text-shadow、transform等效果。靈活的簡直不像話！
• 兼容性：圖標字體支持現代瀏覽器，甚至是低版本的IE瀏覽器，因此能夠放心的使用它。

相比於位圖放大圖片會出現失真、縮小又會浪費掉像素點，圖標字體不會出現這種狀況。

　　劣勢

• 圖標字體只能被渲染成單色，或者是CSS3的漸變色
• 版權上也有着對應的限制，固然仍是有不少免費的圖標字體能夠供咱們下載。
• 當本身創做圖標字體的時候，是比較耗費時間的，重構人員的後期維護成本也比較高

 

　　目前用的比較多的圖標庫就是 font-awesome，如何使用這裏就不贅述了；

　　假如你想本身去製做或者尋找圖標的話，強烈建議 iconfont ;

　　這裏是幫助文檔：https://www.iconfont.cn/help/detail

 

　　轉載請註明出處：http://www.javashuo.com/article/p-opkukbzb-cy.html