Tancy's Blog

性能优化之 IconFont

性能优化之 IconFont

iconfont对于前端来说有很多优点:自由变化大小 矢量不失真、自由修改颜色、可以添加一些视觉效果如 阴影、旋转、透明度、兼容IE6。

现状

目前大家都基本上从[iconfont]平台上生成,生成后的文件如下:

@font-face { font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }

这样直接引用在项目中,真实在手机上的网络请求如下(在桌面版Chrome浏览器网络中无法看到这些请求):

这样造成了极大的网络带宽的消耗,这些icon资源往往在界面渲染中占据重要位置。

怎么用

在移动端,我们目前只引用ttf一个字体文件(Android 2.3 已经不在兼容系统范围)。

在字体文件相对较小的情况下,可以考虑base64在Css文件中。


晓田 ronntx@gmail.com

2015-5-21