(转载)appico图标字体制作zhengyanweb

字体图标除了图像清晰度之外，比位图还有哪些优势呢1、轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

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

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

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

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

3、用data-icon属性还有一种跟上面相似方法是使用HTML5的“data-”属性。如：创建一个data-icon属性。aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。

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

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

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

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

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

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

下载ZIP包后，解压后会得到如下图的文件。将fonts文件夹复制到你的网站，为项目添加字体。从style.css文件中复制CSS样式，并粘贴到你网站的CSS文件中，也可以单独存成一个样式文件。

复制完成后，在CSS文件中找到@font-face，将URL路径修改成你本地的相对路径。

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

调用class：调用js：

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

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

通过以上几种生成器的生成图标字体，加上用CSS对其大小、颜色、透明度、阴影、Transition各种变换等控制，不仅可以缩放自如，制作出各种特殊效果，而且还很容易维护，可以通过多种不同的途径对它们进行操作。相信大家已经体验到他的强大之处，满足日常工作需要应该已经足够了。虽然有这么多优点，但图标字体并不是完美的，也存在些缺点。如：只能被渲染成单色的问题、屏幕阅读器(虽然有解决方法，但并不完善)的问题、性能问题等等，等待着我们去发现和解决。相信未来会有更好的解决方案，比如：SVG（可伸缩矢量图形），未来可能取代位图的图形技术等。立足现在，放眼未来。最后对目前的图标字体生成器工具做一下展望吧！■能够支持导入更多的自定义格式，如EPS、AI等格式。■能够引入项目管理的机制，在同一帐号可以同时管理多个项目图标。■提供更多免费、丰富的图标字体供下载使用。