自制特殊符号生成器(图形字符生成器)

在做手机端 Web App 项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实践发现了一种比较好的解决方案，图标字体化。在微社区项目中，有很多小的 Icon（图标），如分享、回复、赞、返回、话题、访问、箭头等，这些 Icon（图标）一般都是纯色的。开始制作时考虑用双倍大小的 Sprite 图，通过 CSS 样式设置只显示二分之一尺寸，这样在 Retina 屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的效果不是很理想，后来又考虑多套图标适配方案、SVG 矢量图等，都因为种种原因放弃掉了（如多套图标繁琐、Android 2.3不支持 SVG 格式等），为了解决以上问题，用到了图标字体，下图为微社区用到的部分图标字体。

大家可能在网上看过很多关于矢量图标制作的教程，而且大多是技术同学分享的技术贴。整个过程也相对比较简单。在这里我们将深入地向大家讲述字体图标制作的规范流程和注意事项，很多内容是现在网上没有的，纯粹是阿里妈妈 MUX 这两年摸索出来的。阿里妈妈 MUX 在国内首家推出了在线生成字体图标平台，省去了设计师不太擅长的字体制作过程，所以在本教程中我们就不再详细介绍如何使用字体制作工具制作字体图标的过程，更多的是介绍如何在 AI 工具中制作一个规范的字体图标。

一、制作前基础知识普及

1、在制作图标前请下载由阿里妈妈 MUX 提供的矢量图标制作模板；立即下载

2、尽量使用 illustrator 制作矢量图标；有些设计师在 ps 中使用路径绘制图标再导成 SVG，这种方式也是可以的，但是有时会出现一些奇怪的现象，如图形的路径混乱了，图标倾斜了等不可预知的情况，所以还是建议大家在 illustrator 中绘制矢量图标；

3、将 illustrator 中绘制的图形另存为 SVG 格式；最初 iconfont 平台是支持 EPS 文件上传的，但是考虑到 EPS 文件在平台生成过程的不稳定性，所以现在统一采用 SVG 格式；illustrator 中 SVG 格式导出具体教程>> iconfont

4、在绘制图标的过程中不要使用 AI 图形模块的旋转、镜像等功能，整个绘制过程最好使用钢笔工具绘制；^^

5、避免出现图形绘制过中断点的现象。

6、不可以用色彩叠加的方式来达到模块造型；

二、图标栅格

数字形态下，字符是用抽象化的图案绘制成的。当文本显示在屏幕上时，位置非常精确，理想的字体形状需要用一定数量的像素栅格显示。图标设计师常用栅格来控制图标组成元素的比例关系；但是我们在矢量图标制作过程中引入栅格概念主要目的是模拟字体图标在不同尺寸下的展现效果，以达到优化的作用；也就是说图标设计的时候我们用栅格来模拟像素，一个格子就是一个像素，一个图标需要一定数量的像素组成。

举个例子：一个16X16图标，在16X16个像素中通过像素着色的方式把图形表达出来；

那有同学就要问了，通过这样的栅格能达到什么样的优化效果呢？首先我们来了解一下文字的渲染策略，看组图：

从左到右依次）理想的渲染状态、黑白渲染、灰度渲染、次像素渲染

xY907.WUHANEWs.Cn

上图左侧第一张是我们认为一种比较理想的渲染效果，但是通过刚才我们介绍栅格我们可以了解到这种状态是不可能的，因为第一代黑白渲染和第二代灰度渲染是不可能做到显示半格像素或一个像素中显示弧度的。

黑白渲染和灰度渲染在渲染图形遇到半格像素或则弧度的时候，他们会有各自不同的处理方式；举个例子：

如上图红点处像素，我们理解他是有弧度的，且不占满一个像素；各个渲染方式的处理办法如下：

黑白渲染

黑白渲染相对来说比较粗暴，直接通过四舍五入的形式把这里要描绘的图形不显示了；（黑白渲染的形式主要应用于打印机渲染，但是打印机本身的精度非常高，所以打印出来的图形还是很细腻的）

灰度渲染

灰度渲染显得就智能一些了，他通过灰度降级的方式来表达，如果占不到一个像素

那就根据他占的面积来降低这个像素的灰度；占的面积越小灰度就越低；

次像素渲染

次像素渲染是第三代渲染方式，相对来说比较高级，他从从左至右将一个像素分成三份；用不同的色彩值来显示图形，这样图形看起来就更加细腻；

通过了解刚才三种渲染模式对不满一个像素的处理方式，我们就会发现，当我们绘制图标的时候，如果没有把控好图标边缘线在真实场景下渲染的情况，就会被系统进行降级渲染。所以我们更希望能饱满完整的显示一个像素。我们来看一组效果：

从上组图中我们可以看出左侧图形的边都刚好落在完成的像素中，未出现不足一个像素的现象（圆角除外），右侧则未考虑像素栅格的问题；图标在16X16像素大小的应用中很明显感觉到左侧的小图标比右侧的小图标要清晰很多；这是因为右侧的图标的边本来是需要2个像素显示的，但是却落在了3个像素上，渲染的时候出现了一个像素是未降级灰度显示，其他两个像素进行了不同级别的灰度降级。这样我们就会觉得右侧的小图标有点模糊且变粗了。所以在制作图标的时候我们需要引入栅格，去模拟像素点，然后避免图标的线或边不要出现落在半个像素上的情况；

了解到了栅格对于图标优化的重要性，那怎么制作一个能模拟真实像素环境下的栅格呢？

首先我们得了解一下基准框；基准框的作用是为字体矢量图标提供一个大小参考，

如：在16px 像素大小的一个逗号“，”和一个文字“图”的大小和所处的位子是不一样的，这就是因为他们都是在同一套基准框中绘制的图形，才得到相对大小的概念，不然大家同时矢量图标，怎么区别大小呢？

每套字体都有自己不同的基准框，要根据实际设计需要设定，没有严格规定；阿里巴巴矢量图标库在制定基准框的时候考虑到图标展现的标准尺寸：16X16、32X32、64X64、128X128；特设置了一个可以整除他们的尺寸：1024X1024（大家可以通过下载我们制作好的“图标制作模板”获得已经设置好基准框的模板）

根据实际应用的像素大小选择栅格；

如：你要制作一套16X16像素大小的字体图标应用于网站或 app，那么我们建议您在16X16的栅格中绘制，那么16像素2的 n 倍都能应用，这样图标的边框就不会落在半个像素上，避免出现虚边、加粗等现象。（在 retina 屏下不用担心图标的虚边问题，由于显示精度非常高，图标表现得非常细腻。）

那如果要制作一个非标尺寸的图标，如：18X18大小的图标怎么办呢？

我们可以通过在 AI 中修改栅格来实现模拟，如下图：

xY907.WUHANEWs.Cn

在 AI 设置中调出参考线和网格设置设置项，然后拿出你的计算机：1024/X=?把算出来的值尽可能精确的填入网格线间隔这项中，这样你可以模拟在实际应用大小场景中要显示的图形像素点了。

三、实例操作

1、下载模板

2、在 AI 中删除模板的示例图，根据栅格绘制图形；

3、将 AI 中绘制好的图形另存为 SVG

4、打开 iconfont.cn 网站并把保存好的 SVG 文件拖入上传框中

5、完成上传，这样就获得了一个矢量的字体图标

使用图标字体的优势和劣势

字体图标除了图像清晰度之外，比位图还有哪些优势呢?

1、轻量性：

一个图标字体比一系列的图像（特别是在 Retina 屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少 HTTP 请求，还可以配合 HTML5离线存储做性能优化。

2、灵活性：

图标字体可以用过 font-size 属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover 状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

3、兼容性：

网页字体支持所有现代浏览器，包括 IE 低版本。详细兼容性可以点击这里。

除了以上优势之外，当然也有劣势

1、图标字体只能被渲染成单色或者 CSS3的渐变色，由于此限制使得它不能广泛使用。

2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

如何获取图标字体及使用

要想获取图标字体，不外乎两种途径，其一找到付费网站购买，其二就是到免费网站下载，提供免费下载网站很多，神飞曾经发表过一篇博客 iconfont 大搜罗，上面罗列好多的免费网站的地址，大家有兴趣可以去下载。

如何使用呢？一般来说，有3种方法：

1、把字符直接写在 HTML 文件里

xY907.WUHANEWs.Cn

这个方法是简单比较直观，见如下代码，用一个

元素去包含一个 字符“!”(或!)，然后给这个

添加一个类。这个字母在选定的字体中被映射到一个特定的图标。

o

!

!

为了显示效果，还需要编写样式类.Icon 来决定此字符以哪种字体来显示，如下：

o .icon {font-family: ‘ your-incofont -name ‘;}

2、使用 css 来生成内容

它不直接在 HTML 文件里添加字符，而是用 CSS 来生成字符内容。代码如下

赞

可以看出，添加了一个类名“praise”。神奇的事就发生在 CSS 中，跟上面一样，第一步先定义好字体，然后使用:before 伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。

o .icon {font-family: ’ your-incofont-name ’ ;}.praise:before {content:“\f00a”; }

3、用 data-icon 属性

xY907.WUHANEWs.Cn

还有一种跟上面相似方法是使用 HTML5的“data-”属性。如：创建一个 data-icon 属性。

aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。

o

赞

结合一些搭配使用的 CSS 属性，可以写成如下代码

o [data-icon]:before {font-family: ‘ your-incofont-name ’ ; content:attr(data-icon);speak:none;}

制作自已图标字体

以上是免费图标字体使用的几种方法，下面看看如何制作属于自己的图标字体。

1、首先需要有创建矢量图标的软件，并且能够输出 SVG 格式，比如 “Illustrator ”或者“Inkscape”。也可以用 Photoshop 的路径工具画出所需要的图标，然后导出路径到 Illustrator 里去填色。 下图为 Adobe Illustrator 软件。

注意一定是封闭的路径，不能是单路径描边，如果是单路径的话生成字体图标后会显示不出来。两个以上的图形要合并、图形尽减少节点使用。如下图，中间的图(嘴巴部分)为单路径描边（不封闭）,导入图标生成器后会如右图所示，嘴巴部分显示不出来。

2、图标制作完成后，选择 “文件”菜单中“保存”，把文件保存成“SVG”格式。使用默认的 SVG 设置。

3、把 SVG 格式的图标导入到 icomoon、fontello、iconfont 字体生成器中，去生成所要的图标字体，以下介绍一下几种字体生成器的用法：

（1）图标字体生成器

IcoMoon！一个可以通过个性化设置来创建自定义图标（字体）的生成器！ IcoMoon 是一项免费的服务，通过使用不同设置使我们能够创建自定义的 Icon 图或 Icon 字体。除了自定义 Icon 外，IcoMoon 也有自己免费的海量图标集，都非常赞。

打开地址，点击 Start the App 按钮。

点击 Import Icons 按钮导入 SVG 图标，导入后对图标进行相关的操作，如选中、删除、移动、编辑等。

编辑完成后，就可以进行下载了，它提供两种下载方式：图片版和字体版！图片版是经过 CSS Sprites 技术处理的 PNG 格式，字体版有多种格式供我们选择（EOT,SVG,WOFF,TTF）。

如果要兼容 IE7以下浏览器，请在设置里勾选 Support IE7(and older)选项，会生成一个单独 JS、CSS 文件。

下载 ZIP 包后，解压后会得到如下图的文件。将 fonts 文件夹复制到你的网站，为项目添加字体。

从 style.css 文件中复制 CSS 样式，并粘贴到你网站的 CSS 文件中，也可以单独存成一个样式文件。

复制完成后，在 CSS [email protected]，将 URL 路径修改成你本地的相对路径。

字体和路径都设置完成后，在 HTML 页面只需调用相对应的 class 就可以了。如果想兼容 IE7浏览器，需引用 IE7目录的 js。如：

调用 class：

调用 js：

（2）图标字体生成器

它的生成方式与上面的类同，这里不做介绍，很容易上手。

（3）ISUX 矢量字体图标库

ISUX 矢量字体库目前提供了丰富的字体图标，可以供下载使用，暂时还不支持自定义图标的导入，期待不久的将来它的功能会越来越完善。大家有什么好的建议和想法可以联系他们。

通过以上几种生成器的生成图标字体，加上用 CSS 对其大小、颜色、透明度、阴影、Transition 各种变换等控制，不仅可以缩放自如，制作出各种特殊效果，而且还很容易维护，可以通过多种不同的途径对它们进行操作。相信大家已经体验到他的强大之处，满足日常工作需要应该已经足够了。虽然有这么多优点，但图标字体并不是完美的，也存在些缺点。如：只能被渲染成单色的问题、屏幕阅读器(虽然有解决方法，但并不完善)的问题、性能问题等等，等待着我们去发现和解决。相信未来会有更好的解决方案，比如：SVG（可伸缩矢量图形），未来可能取代位图的图形技术等。

立足现在，放眼未来。最后对目前的图标字体生成器工具做一下展望吧！

■ 能够支持导入更多的自定义格式，如 EPS、AI 等格式。

■ 能够引入项目管理的机制， 在同一帐号可以同时管理多个项目图标。

■ 提供更多免费、丰富的图标字体供下载使用。

FAQ

1、跨域问题：

（1）通过配置自己的服务器。

# For Apache

Header set Access-Control-Allow-Origin “*”

# For nginx

location ~* \.(eot|ttf|woff)$ {add_header Access-Control-Allow-Origin *;}

（2）放在同一个域下。

（3）使用 base64 置入 CSS 中 (Icomoon 在导出图标时，设置里勾选Encode & Embed Font in CSS 选项)。

2、字体图标出现锯齿的问题：

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

[email protected] 与性能：

[email protected] 的性能问题，可以参考以下文章。

原文地址：www.stevesouders.com

翻译地址：www.cnblogs.com

文章内的建议和总结:

（1）只在你确定你非常需要 @font-face 的时候才使用它;

（2）[email protected] 定义在所有的 script 标签前;

（3）如果你有许多字体文件，考虑将它们分散到几个域名下;

（4）不要包含没有使用的 @font-face 声明——IE 将不分它使用与否，通通加载;

（5）Gzip 字体文件，同时给它们一个未来的过期头部声明;

xY907.WUHANEWs.Cn

（6）考虑字体文件的后加载，起码对于 IE。