网页字体字库自定义：WebFont与页面ICON图标调用说明
发布日期：2016-07-11 08:48:50 浏览量：
这里额外提一点，为何 天猫 的html页面中使用的是html实体+font而不是css样式+font？这其实是考虑了低版本浏览器的兼容性。因为部分（低版本的）浏览器还不支持css伪元素，但是html实体一定是支持的。
对比
到现在为止，我们已经有了2种（严格来说，是3种）来制作和使用网页icon小图标，
- 图片 + css sprite
- webfont + html实体
- webfont + css样式
三者的对比如下图，
总得来说，前者是操作图片，后两者操作icon小图标就跟操作字体是一样的。比如，我想缩放图标，直接修改 font-size 即可；我想修改颜色，直接修改 color 即可。除了这些简单的变化，还可以灵活的添加描边、阴影等。
不过webfont的图标色彩单一（最多也就只能做出渐变），而图片则色彩丰富。
webfont的更多内容
Font Awesome
Font Awesome （ 中文站点 ）是一套为Bootstrap而创造的图标字体库及CSS框架，在业界享有盛誉。
FA包含了常规web开发所需要用到的几乎所有图标，并且免费授权使用，只需要下载即可。详情请参阅其官网。
中文WebFont
目前在国外，webfont已经非常流行，但是国内迟迟未能起步。这跟国内的环境有关系，
- 中文字体库过于庞大，需要一定带宽支持
- 国内低版本浏览器市场占有率不能忽视，但是低版本的浏览器不能良好的支持webfont
不过，目前国内已经有两家公司致力于webfont这一块的服务，
有翻墙资源的，可以参阅google推出的webfont云托管服务。有兴趣的同学请自行调研相关服务。
中文webfont压缩
字蛛（Font-Spider） 是一款基于nodejs的开源的本地webfont压缩器。它的原理就是扫描页面文档，然后删除webfont中没有使用的字符，从而达到精简webfont体积的目的。有兴趣的同学可以参阅其官网。
参考列表
End. All rights reserved @gejiawen .
