浅尝iconfont

1. iconfont简介

什么是iconfont?正如字面意思,就是图标字体,下面我给大家慢慢道来

web页面包含什么元素?

  • 文字
    • 链接
  • 流媒体
    • 视频
    • 音频
  • 图片
    • 背景图(大)
    • 插图(中,例如照片集,课程封面等)
    • 图标(小)

在所有包含ui的程序架构中,以上不同的ui元素在各种环境中都会遭遇到不同的问题,同时也都有与之对应的解决方案 iconfont 就是一个解决【图标】问题的解决方案之一

1.1 图标问题

首先来看一下图标会有什么难题:

  • 图标的大小会变,在两种情况下:
    • 每次ui改版,那些厌倦一成不变喜欢尝鲜的设计师们总是会淘气地改变图标大小,图标一般是点缀其他事物,例如文字,有时候设计会把某个图标从一段描述文字改成标题的点缀,这时候图标就需要变大
    • 自适应页面,整个页面的大小都在变,难道图标还能独善其身吗?
  • 图标会经常换,这点还是那些设计师的问题,他们说不好看要换,作为开发我们还能说什么?
  • 图标自身也会变,“来把那个图标改成红色吧,鲜艳点!”,“那个谁,把那个图标的底色改成蓝色吧~”,“...”

背景图和插图一般不会有这些问题,他们偏向于主体内容而不是点缀,一般不会改变。背景图一般是平铺,插图一般也是定宽,所以大小也不怎么需要改变。

1.2 图标解决方案

图标的解决方案有:

  • 使用png图片,这是最传统的方案,兼容性最好,使用方面基本不会有技术问题。但是它不够方便,主要有以下两个问题:
    • 只要图标稍有改动都必须换新的图片,即使只是换个颜色或者透明度
    • 图标大小改变问题,不管是改图标还是需要自适应。使用大图片会造成两个问题:缩放效率和大图流量浪费加载慢
  • 使用svg图片可以很好的解决图片大小的问题,但是兼容性是这个解决方案的致命问题,svg不兼容IE6~8,svg不兼容Android2.3
  • css,对于一些简单的图标,比如箭头,叉叉等,可以使用css来绘制而成,这也是现在移动端经常使用的方式,毕竟移动端对css3兼容性较好,但是利用css绘制的图片的问题是不能支持自适应,自适应的css会出现小数点,图标本身就是小的,所以当位置相差1px看起来都会很明显

1.3 iconfont解决方案

iconfont是图标的另一种解决方案,它是把一些简单的图标制作成字体,然后让图标变成和字体一样使用 iconfont有以下优点:

  • 字体是矢量的,所以可以随意改变大小
  • 因为它是字体,所以所有字体的css都可以使用,比如font-size,color,background,opacity等
  • iconfont的制作也很简单,现在有很多线上制作iconfont的站点,只要上传svg的图标设计稿,就能线上生成iconfont字体文件,而且连使用代码都直接生成
  • iconfont没有兼容性问题,IE6,Android2.3都能够兼容

2. 使用iconfont

虽然使用iconfont没有图片那么简单,但也没有想象中那么难,下面来看看怎么使用iconfont 首先,你需要制作iconfont,现在有许多iconfont的站点,比如fontello 我们随便选择一个图标:

然后我们可以自定义字码:

最后我们就可以下载字体文件了:

下载完,解压出来,我们可以看到有demo,有字体文件,也有使用代码:

可以看到使用代码里面已经把各种兼容性考虑到了:

使用代码也给到,注意使用类名也是可以在站点中自定义的:

另外注意的是,字体文件也是可以内链的,在fontello-embedded.css文件里面:

基本上,利用提供的代码,基本我们就可以完全兼容的使用iconfont,下面介绍移动端使用iconfont,在移动端只需要如下代码:

在移动端,只需要truetype类型

效果如下:

使用iconfont,我们可以应用许多字体样式,现在我们改变一下样式:

效果如下:

可以发现,改变一个图标的颜色,背景色,大小都是非常方便的一件事

另一方面,当需要改一个图标的时候,我们可以在制作iconfont的时候,替换掉一个图标即可,使用的类名和字码都是可以定制的,这样就可以在不用修改业务使用代码的情况下,只需要替换掉内链的字体代码就可以完成替换图标的工作

以上代码经过实机测试,兼容IOS4,Android2.3 在移动端,iconfont也可以使用外链形式,这里就不再赘述

3. 小结

在解决图标的问题上,不管是兼容性,灵活性,扩展性,iconfont都是一个很好的解决方案

3.1 iconfont优势

  • 灵活性,改变图标的颜色,背景色,大小都非常简单
  • 兼容性,兼容所有流行的浏览器,不仅h5可以使用iconfont,app也可以使用iconfont,关于这方面可以查看其它线上分享
  • 扩展性,替换图标很方便,新增图标也非常简单,也不需要考虑图标合并的问题,图片方案需要css sprite
  • 高效性,iconfont有矢量特性,没有图片缩放的消耗高

  • 在使用上字体文件和普通的静态资源一样,既可以外链也可以内链,并且字体文件也可以使用gzip压缩
  • 在移动端上,可以只使用truetype类型,非常灵活小巧
  • 现在很多项目已经在使用iconfont,先不说国外,比如国内,阿里巴巴各个平台(不仅pc,h5,还有app)已经全面使用iconfont,并且阿里巴巴还搭建了一个线上iconfont站点,这是一个很完善的站点,上面有阿里几个主要业务的图标资源库,也可以让用户自己制作图标,完善用户自身的图标库,让用户之间可以共享形成生态,同时站点的使用说明也非常完整,从图标设计,iconfont制作和iconfont使用(里面包含了各个平台的使用方法)都有很完善的说明

3.2 iconfont缺点

  • 制作iconfont需要svg设计稿,对于开发来说没有图片来的方便
  • iconfont有些特有的问题,详情可参考@font-face and performance,不过许多问题在移动端是不存在的

3.3 结语

总的来说,iconfont是可以应用的,特别是在移动端,如果不兼容Android2.3,使用svg图片也是可以接受的,实际上制作iconfont也是需要svg资源的,所以两者其实很类似

另外,阿里巴巴主要业务都已经广泛应用iconfont,并且还有成熟的线上站点支持,最起码在可行性方面是可以不用过多考虑的,虽然在使用iconfont的过程中可能会遇到许多问题,但是鉴于iconfont应用广泛的前提下,线上的资源也会非常丰富,应该不需要过多的担心

最后想说,我们业务是可以考虑使用的!如果要应用iconfont,我们还需要设计们的支持!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

SVG fallback 及可读性

933
来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

3595
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

3145
来自专栏phodal

我们是如何将 Cordova 应用嵌入到 React Native 中

重写一个应用是一件简单的事,可是演进一个应用则是一件复杂的工作。 过去的一年多里,我在工作上的主要职责是:手机 APP 开发。日常主要是编写基于 Ionic 和...

2296
来自专栏前端架构

小议前端在360极速官网的创新运用

话说离上次官网改版有段时间了,里面的一些CSS3的运用我想看过上篇文章也有所了解。本文再谈谈此次改版中HMTL5、CSS3运用和性能优化等一些总结。还望大家别取...

682
来自专栏IMWeb前端团队

精选的10个前端开发工具...| 慕课网

网页前端开发人员必须关注当下流行的工具,今天为了帮助前端开发者们找到好的高效的开发工具,我们转载分享了这些工具。例如:生成工具、JS库、框架和其他好...

2335
来自专栏iKcamp

翻译 | 使用A-Frame打造WebVR版《我的世界》

原文地址:Minecraft in WebVR with HTML Using A-Frame 原文作者:Kevin Ngo 译者:Felix 校对:阿希 我是...

4079
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(16)---用Spread设计器创建和编辑图表

Spread支持85种丰富多彩的图表效果。可以在Spread设计器中基于工作表的数据直接生成图表,操作简单。同时,软件人员还可以在Visual Studio设计...

1968
来自专栏web前端教室

本周先行者课程--多级下拉菜单回顾

各位同学们大家好,又到周末了。这个周末咱们开始讲新的前端组件,多级下拉菜单。这个东西我们以前讲过一次,但因为感觉之前讲的有些不太充分,还是把它再拿出来讲一下。 ...

1868
来自专栏企鹅号快讯

前端插件以及部分细分网址梳理

图来源网络 前端插件以及部分细分网址梳理 插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 tot...

2019

扫码关注云+社区