【转载】APP图标在手机上显示模糊的问题

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

 

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

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

 

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

 

三、兼容性：网页字体支持全部现代浏览器，包括IE低版本。详细兼容性能够点击这里。

 

除了以上优点以外，固然也有劣势
一、图标字体只能被渲染成单色或者CSS3的渐变色，因为此限制使得它不能普遍使用。
二、使用版权上有限制，有好多字体是收费的。固然也有不少免费开源的精美字体图标供下载使用。
三、创做自已的字体图标很费时间，重构人员后期维护的成本偏高。

如何获取图标字体及使用

要想获取图标字体，不外乎两种途径，其一找到付费网站购买，其二就是到免费网站下载，提供免费下载网站不少，神飞曾经发表过一篇博客icon font大搜罗，上面罗列好多的免费网站的地址，你们有兴趣能够去下载。如何使用呢？通常来讲，有3种方法：
一、把字符直接写在HTML文件里；
这个方法是简单比较直观，见以下代码，用一个元素去包含一个字符“!”(或!)，而后给这个添加一个类。这个字母在选定的字体中被映射到一个特定的图标。

 

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

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

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

 

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

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

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

 

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

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

制做自已图标字体

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

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

 

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

 

二、图标制做完成后，选择 “文件”菜单中“保存”，把文件保存成“SVG”格式。使用默认的SVG设置。
三、把SVG格式的图标导入到icomoon、fontello、iconfont字体生成器中，去生成所要的图标字体，如下介绍一下几种字体生成器的用法：
（1）图标字体生成器http://icomoon.io/app/
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文件中找到@font-face，将URL路径修改为你本地的相对路径。

 

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

 

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

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

 

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

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

 

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