字体图标的优势和劣势（字体图标的优势和劣势是什么）



在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实践发现了一种比较好的解决方案，图标字体化。在微社区项目中，有很多小的Icon（图标），如分享、回复、赞、返回、话题、访问、箭头等，这些Icon（图标）一般都是纯色的。开始制作时考虑用双倍大小的Sprite图，通过CSS样式设置只显示二分之一尺寸，这样在Retina屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的效果不是很理想，后来又考虑多套图标适配方案、SVG矢量图等，都因为种种原因放弃掉了（如多套图标繁琐、Android 2.3不支持SVG格式等），为了解决以上问题，用到了图标字体， 通过查阅Icon Font相关技术博客和文章，并结合在项目中实际应用梳理出了图标字体化浅谈这篇文章，望对正在学习和使用的重构同学们有一个参考和帮助！文章内的内容参考了相关技术文章并加上自已的理解，错误在所难免，欢迎批评指正。下图为微社区用到的部分图标字体。

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

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

为了显示效果，还需要编写样式类.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里去填色。 下图为Adobe Illustrator软件。

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

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

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

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

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

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

调用class：
调用js：

（2）图标字体生成器http://fontello.com/

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

（3）ISUX矢量字体图标库http://font.isux.us/

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

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;
3、@font-face与性能：
关于@font-face的性能问题，可以参考以下文章。
原文地址：http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
翻译地址：http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
文章内的建议和总结:
（1）只在你确定你非常需要 @font-face的时候才使用它;
（2）将你的@font-face定义在所有的script标签前;
（3）如果你有许多字体文件，考虑将它们分散到几个域名下;
（4）不要包含没有使用的 @font-face声明——IE将不分它使用与否，通通加载;
（5）Gzip字体文件，同时给它们一个未来的过期头部声明;
（6）考虑字体文件的后加载，起码对于IE。

转自腾讯ISUX:http://isux.tencent.com/icon-font.html

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/39977.html