bleanycao

1年前
  • 1807

    浏览
  • 2

    评论
  • 0

    收藏

Iconfont在教育平台的实践

本文作者:imweb bleanycao 原文出处:imweb社区 未经同意,禁止转载

Iconfont 体系化解决方案

背景

性能优化是前端开发不得不面对,必须重视的一个经久话题。教育平台项目除了常规的web性能优化外,图片资源站到了流量的70%+,因此图片的性能优化是个重中之重。除了常规的图片优化外,课程封面和机构上传的图片采用了webp格式,之前已介绍过,不再赘述。这样,对平台图片的优化已经达到极致了吗?

随着平台规模的不断扩大,我们发现/img/目录的小图标越来越多,已经达到了700+多个,这么多图标真的都是必须的吗?

从上面这张图可以看到,以箭头为例,不同颜色、不同大小的达到几十张,为了适配不同场景,而这些一个矢量图就可以轻松搞定。

矢量图,两个方案,svg和iconfont。svg雪碧图只兼容IE9+,而平台仍需要支持IE8的用户,为了避免矢量图和位图两套方案,选择了兼容性更好的iconfont,可以完美兼容到IE6。

适用场景及大小对比

  • 矢量图,缩放不失真,代替不同大小、颜色的多icon
  • 单色icon(支持CSS3渐变色)
  • 平台有319个图标(共655KB)适合做iconfont

图片与iconfont大小对比:

很明显,合并后的iconfont只有之前图片雪碧图的8%,不足10KB。

体系化解决方案

iconfont效果明显,业务场景适用,我们到底该如何使用?市面上已经有很多iconfont的平台,上传svg转化为字体文件,可下载查看demo,copy样式到代码中,但是存在几个问题:

  1. content不固定,当修改或删除某些icon时,所有content值改变,需手工整站修改
  2. 需手工下载demo,copy修改。流程繁琐,未与构建工具打通自动化

    鉴于此,我们自己实现了一套体系化的解决方案,开发只需要在html中引入class名,其余一切自动化实现,分分钟帮你搞定。perfect! 流程如下:

使用效果

与图片效果一致

遇到的一些问题

svg图标绘制

虽然目前线上有很多这种图标,但是为了我们平台的图标统一性和可沉淀,我们选择了自己绘制图标。

在选择绘制图标大小上有了几次尝试,因为图标大多数是12px/16px/24px/32px/48px,最后我们经过多次测试确认绘制的svg大小为480px,左右留白30px这个标准

字体跨域问题

这个是遇到的最简单的一个问题,之前也研究过,设置cors即可:

Access-Control-Allow-Origin: *

对齐问题

是字体都会涉及到行高问题,icon font当然也不例外,默认我们设置line-height: 1;,在垂直对齐的时候先使用vertical-align,如果不行,我们就用绝对定位。

锯齿,锯齿,还是锯齿

虽然icon font很大程度上减少了资源大小,节省了开发工作量,一定程度上也优化了代码,并形成一个新的可遵循的规范,但目前它的表现还不是那么完美,离图片还是有点距离的

  • ie8浏览器对圆形的icon font支持不友好,如果字体比较小会有明显的锯齿,字体超过20px就会有所改善,因为这个只好把所有圆形的图标都换成图片了
  • 低端的pc机上,icon font渲染不好,有一定程度的锯齿,chrome也不例外
  • 有一定的虚边,这个跟字体本身有关系,所有的文字字体渲染都有一定的虚边

兼容问题

网上和iconfont.cn给出的推荐写法是:

[[@font-face](/user/font-face)](/user/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- */

} 但是经过实测,IE9已支持.woff,iOS4.1-几乎没有用户,因此优化为:

[[@font-face](/user/font-face)](/user/font-face) {
    font-family: 'iconfont';
    url('fonts/webfont.eot?-7drjga') format('embedded-opentype'),      /* IE6-IE8 */
    url('fonts/webfont.woff?-7drjga') format('woff'), /* IE9+、chrome、firefox */
    url('fonts/webfont.ttf?-7drjga') format('truetype');/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

同时要注意书写顺序,如果.ttf在.woff之前,则chrome会同时下载这两个文件,而其他浏览器则只下载自己认识的字体文件。

遗留问题

  • IE8中,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。
  • iOS、Andriod中,字体文件或阻碍其他资源下载。

    因此,针对这两种情况需要特殊处理,采用lazyload方式,避免影响正常业务逻辑。

最后icon font要想真的替换所有图片,还需要浏览器进一步进化。期待美好的那一天到来!!!

2 条评论