字体图标技术在前端设计中的应用

2019-11-23赵文艳

科技风 2019年29期

赵文艳

摘要：图标在前端设计中应用广泛，主要的图标技术有雪碧图（sprite），纯CSS3图标和字体图标三种，这三种方案各有优劣。文章主要阐述了字体图标技术特点，重点说明了如何应用该技术。

关键词：字体图标;前端设计

在前端设计中，必不可免的要用到各式各样的图标，它们能够对产品功能进行划分，也能给用户好的视觉体验。应用这些图标的前端技术主要有三种：第一种是雪碧图（sprite）方案，是将多个小图标整合在大图片中，通过CSS中的background相关属性对图片进行布局定位。该方案的好处在于减少服务器请求次数，提高页面显示性能，缺点是修改不易，而且受分辨率的影响。第二种是纯CSS绘画图标，优点是代码实现，可缩放，性能高，缺点是对设计者要求高，复杂的图案设计困难，还存在兼容性问题。第三种是文章阐述的字体图标技术。

1 生成字体图标

1.1 字体文件类型

不同的浏览器对字体格式的支持是不同的，下面简要介绍字体的几种格式。

EOT。只有IE浏览器才支持的字体格式，需要使用专门的工具将常规字体转为该格式。

TrueType和OpenType。电脑中常见的字体格式，后缀名是“.ttf”和“.otf”。

WOFF。专门为WEB设计的字体格式，可以看作是TrueType和OpenType的压缩版，文件体积更小，因此下载速度也会更快。

SVG。它本身不是字体格式，而是可缩放矢量图形的绘制方式，缺点是体积大。

因为浏览器兼容问题，在使用字体文件时，不能只选取一种类型。而是选取多种类型，浏览器自主选择支持的类型下载。

1.2 生成字体图标的网站

使用字体图标首先要生成字体图标，在网络上有很多提供免费字体的网站。这里介绍两个比较热门的字体图标生成网站。

Iconmoon（http：//www.iconmoon.io）。可以选择单个下载与打包下载，下载格式为zip，解压后会有不同格式与大小的多种图标，方便使用。

Iconfont（http：//www.iconfont.cn）。阿里巴巴图标库，国内设计师的原创作品，有官方与色彩图标分类，线条圆滑，风格多样，包含许多国内应用和具有中国特色的图标。下载时需要登陆，可以收藏图标，大多数为免费下载。

1.3 字体图标的生成

以阿里巴巴图标库为例，进入网站后，先使用账户进行登录，然后自由选择需要的图标库，单击购物车图标将选中的图标加入购物车，选择图标完毕，单击购物车图标进入下载页面，选择“下载代码”将制作好的字体图标下载到本地。将下载好的文件解压缩，得到九个文件。其中demo.css和demo_index.html是官方提供的演示案例，供用户参考。.eot，.svg，.ttf，.woff，.woff2格式的五个文件是字体图标文件。.js文件是为了描绘彩色图标。Iconfont.css文件是字体图标应用的CSS样式。

2 字体图标的应用

2.1 普通字体图标的使用

将解压好的阿里图标文件拷贝到项目目录的预设文件夹内，在项目中引入iconfont.css文件，或将iconfont.css文件里的内容复制粘贴到项目的css内容里。

在项目需要使用图标的位置添加诸如i，span等类似的挂钩标签，为标签添加两个类名。一个固定的是iconfont，另一个是要使用图标对应的类名。

2.2 彩色圖标的使用

Iconfont提供了Symbol 图标引用方式，该用法的实质是做了一个 SVG 的集合。优点是可以显示彩色图标，缺点是兼容性差，浏览器渲染的性能一般。

首先需要在项目页中引入下载包中的 symbol 代码：

加入CSS样式，设定图标的宽高：

.icon { width：1em;height：1em;vertical-align：-0.15em;fill：currentColor;overflow：hidden;}

挑选相应图标并获取类名，例如类名为icon-fanqie，应用于页面：

3 结语

以阿里巴巴字体图标的下载和使用为例，其余的字体图标生成网站大同小异。字体图标有着轻量级，灵活性好，兼容性强等优点。当然也有自身的缺点，比如字体图标的版权和付费问题。有些浏览器并不支持彩色图标。用好字体图标，对前端设计工作大有帮助，所以前端设计者应该熟练掌握字体图标技术。