这里额外提一点,为何 天猫 的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
.
文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站