图标字体化浅谈.pdfVIP

图标字体化浅谈 在做手机端 Web App 项目中 ,经常会遇到小图标在手机上显示比较模糊的问题，经过实践发现了一种 比较好的解决方案，图标字体化。在微社区项目中，有很多小的 Icon （图标），如分享、回复、赞 、返回、话题、访问、箭头等，这些 Icon （图标）一般都是纯色的。 开始制作时考虑用双倍大小的 Sprite 图，通过 CSS 样式设 置只显示二分之一尺寸，这样在 Retina 屏 上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的效果不是很理想，后来又考 虑多套图标适配方 案、 SVG 矢量图等，都因为种种原因放弃掉了（如多套图标繁琐、 Android 2.3 不 支持 SVG 格式等），为了解决以上问题，用到了图标字体， 通过查阅 Icon Font 相关技术博客和 文章，并结合在项目中实际应用梳理出了图标字体化浅谈这篇文章，望对正在学习和使用的重构同 学们有一个参考和帮助！ 文章内的内容参 考了相关技术文章并加上自已的理解，错误在所难免，欢迎批评指正。下图为微社 区用到的部分图标字体。 使用图标字体的优势和劣势 字体图标除了图像清晰度之外，比位图还有哪些优势呢 ? 1、轻量性 ：一个图标字体比一系列的图像（特别是在 Retina 屏中使用双倍图像）要小。一旦图标 字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少 HT T P请求，还可以配 合 HT ML5 离线存储做性能优化。 2、灵活性 ：图标字体可以用过 font-size 属性设置其任何大小，还可以加各种文字效果，包括 颜色、 Hover 状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得 为每个不同大小和不同效果的图像输出一个不同文件。 3、兼容性 ：网页字体支持所有现代浏览器，包括 IE低版本。 除了以上优势之外，当然也有劣势 1、图标字体只能被渲染成单色或者 CSS3 的渐变色，由于此限制使得它不能广泛使用。 2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用 。 3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。 如何获取图标字体及使用 要想获取图标字体，不外乎两种途径，其一找到付费网站购买，其二就是到免费网站下载，提供免 费下载网站很多，神飞曾经发表过一篇博客 icon font 大搜罗，上面罗列好多的免费网站的地址，大 家有兴趣可以去下载。如何使用呢？一般来说，有 3 种方法： 1、把字符直接写在 HT ML 文件里； 这个方法是简单比较直观，见如下代码，用一个 span 元素去包含一个字符 “或! ”(!) ，然后给这 个span 添加一个类。这个字母在选定的字体中被映射到一个特定的图标。 为了显示效果，还需要编写样式类 .Icon 来决定此字符以哪种字体来显示，如下： 2、使用 css 来生成内容； 它不直接在 HT ML 文件里添加字符，而是用 CSS 来生成字符内容。代码如下 可以看出，添加了一个类名 “praise。神奇的事就发生在” CSS 中，跟上面一样，第一步先定义好字体 ，然后使用 :before 伪元素来产生字符图标，其中 “before表示字符出现在左边，” “after则出现在” 右边。 3、用 data-icon 属性 还有一种跟上面相似方法是使用 HT ML5 的 “data-属性。如：创建一个” data-icon 属性。 aria-hidden= ”true是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。” 结合一些搭配使用的 CSS 属性，可以写成如下代码 制作自已图标字体 以上是免费图标字体使用的几种方法，下面看看如何制作属于自己的图标字体。 1、首先需要有创建矢量图标的软件，并且能够输出