您的位置:首页 > 设计教程 > 网页设计 > 内页

网页字体字库自定义:WebFont与页面ICON图标调用说明

核心提示: 关于页面icon的制作,比较传统的方法是,让设计师去设计一个个的小图片,然后网页程式员再将设计好的icon放到页面上适当的位置。不过,随着这些年Web前端技术的迅猛发展,现在有一种新的方案去制作页面icon,那就是webfont。

这里额外提一点,为何 天猫 的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 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:designlinks
扫一扫 订阅最新资讯
回到顶部