图标字体 VS 雪碧图——图标字体应用实践

本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题，同时具备兼容性好，生成的文件小等优点。

雪碧图

雪碧图实例：淘宝PC端

将多张小图放至一张大图

使用的时候，通过background-position调整显示的位置，如下图所示：

雪碧图的使用方法

使用雪碧图唯一的优点，可以说就是减少浏览器的请求次数。因为浏览器同一时间能够加载的资源数是一定的，IE 8是6个，Chrome是6个，Firefox是8个。为了验证，写了以下html结构：(这部份虽然有点跑题，但是很要必要深究一下)

验证Chrome同时加载个数的html--很多张很大的图片

然后在Chrome的开发者工具里面的Timeline可以看到Chrome确实是6个6个加载的，每次最多加载6个：

Chrome同时最多加载资源数为6个

雪碧图的制作方法可以用node的一个的插件css-sprite，十分地方便。只要将图标做好，放到相应的文件夹里面，写好配置文件运行，就能够生成相应的图片和css，无需自己手动去调整位置等css属性。详见css-sprite

然而，使用雪碧图存在不可避免的缺点

雪碧图的缺点

高清屏会失真

在2x的设备像素比的屏幕上例如mac，如果要达到和文字一样的清晰度，图片的宽度需要实际显示大小的两倍，否则看起来会比较模糊：读者可以对比左边文字和右边图片里文字的清晰度

右边图片里的文字比左边字体的文字模糊

特别是现在手机绝大部份是高清屏了，例如iphone 6 plus的分辨率达到了1920 * 1080，所以为了高清屏，使用雪碧图可能要准备多种规格的图片。

雪碧图不方便变化

雪碧图是一张静态的图片，当他生成的那天就注定了他要以什么样的方式展示，因此我不能动态地改变他的颜色，无法让他变大(可能会失真)，无法像文字一样加一个阴影效果等等。例如下面的菜单，hover或者选中的时候反色：


选中或者hover时反色

或者是某一天UI要换颜色、某一天老总挂了，为表哀悼，为个公司的网站要换个灰色调。使用雪碧图时，所有的图标都得重新制作。

使用图标字体可以完美解决上面的问题

图标字体icon font

图标字体就是将图标作成一个字体，使用时与普通字体无异，可以设置字号大小、颜色、透明度等等，方便变化，最大优点是拥有字体的矢量无失真特点，同时可以兼容到IE 6。还有一个优点是生成的文件特别小，215个图标的生成的ttf字体文件才41KB

一个图标字体里面的元素

如何制作图标字体

需要准备PS和AI，打开UI图，选中图标的图层，通常它是设计师画的一个形状：


1. 选中图标的图层

然后执行：文件->导出->Illustrator，如下左图所示，将生成一个AI文件。用AI打开刚刚生成的文件，执行File->Scripts->SaveDocsAsSVG，如下右图所示，将生成一个SVG文件：

2. 左: PS里导出AI文件，右：AI里面导出SVG

接下来，借助一个第三方的网站制作图标icomoon.io，进入app页面，选择导入icon，将刚刚生成的svg上传上去

3. 上传到icomoon

最后生成字体并下载：

4. 生成几种规格的字体

使用的时候通过@font-face引入，根据图标的编码就可以在页面中使用了。

然而在实际的操作中并没有像上面说的那么顺利，会遇到很多阻碍，笔者也是摸索了很久才总结了一套实用的经验，这也是其它介绍图标字体的教程没有提及到的，看其它很多教程可能会在实际使用中遇到很多坑。

坑1：图标字体只支持单路径

通常情况下，设计师在制作图标的时候是用多个路径组合出来的，在上面的导出的svg也是带有多个路径的，打开svg文件就可以知道，它是由几个path组成的：

导出的svg文件是由几个path组成的

但是字体只支持单路径， 一个解决办法是手办修改svg文件，把多个path合并成一个，这就要求对svg格式比较熟悉。但是这种方法吃力不讨好，只适用比较简单的情况，复杂的图标最后合并的效果很难做到和原先的一模一样。

有一个比较智能的办法，就是使用PS的合并形状组件的功能：

使用PS合并形状组件

这样子生成的svg就是单路径的，有时候会遇到“合并形状组件”的菜单项是置灰的，只要把图层的小眼睛点掉再打开就可以了（或者可能本身就是单路径的）。

坑2：有些图标是多个图层组成的

一开始不知道，所以比较笨的方法是分别生成几个svg之后，再去手动去合并svg。其实PS有一个合并形状的功能，选中多个形状后，右键“合并形状”：

使用PS合并多个形状图层

坑3：生成的SVG填充可能被置为none

有时候会遇到生成了svg，但是上传上去是空的，检查一下svg文件发现是fill被置为none了，如下所示：

生成的svg是fill:none

这个时候需要手动改一下svg文件，把fill:none改成随便一个色值即可，如fill:#000000.

使用一个脚本自动导出svg

在上面的操作中，都是要先执行PS导出再到AI里面执行导出，其实有一个脚本，能够自动执行这两步：PSD to SVG， 支持PS CS6，不支持CC，还可以把这个脚本设置一个快捷方式，用起来非常方便。使用这个脚本需要注意的是图层的命名不能带中文，不然会出错，所以通常把图层复制到一个新的文件里面进行操作。

使用PSD to SVG增加便利

现在重点说下，图标字体的使用和一些注意事项

图标字体的使用

通过font-face导入自定义字体，可以参考字体下载后的demo。然后，把所有使用图标字体的span/a标签都加一个.icon的类，.icon类设置font-family为font-face定义的字体名

@font-face {
    font-family: ‘icon-font‘;
    src:    url(‘fonts/icon-font.eot‘);
    src:    url(‘fonts/icon-font.eot#iefix‘) format(‘embedded-opentype‘),
        url(‘fonts/icon-font.ttf‘) format(‘truetype‘),
        url(‘fonts/icon-font.woff‘) format(‘woff‘),
        url(‘fonts/icon-font.svg#icon-font‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
}

.icon{
    font-family: "icon-font":
}

最后，每个图标使用它在相应的编码或者HTML实体：

图标字体的两种使用方法

其中，e9d3是当前图标在这个字体里面的十六进制编码。在普通字体里，0的编码是0x16，即48，为0的ascii编码。

在使用过程中遇到的坑：

1. webkit浏览器会在加缘加粗1个像素

如下，读者可找下区别：

左边的图标边缘多了一个像素，右边是正常的

这个问题在间距比较小的时候就会比较明显，例如上图第二个图标中间。解决文案是加一个font-smoothing的属性：

.icon{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

2. 注意缓存

后续加了新的图标字体，如果不做处理的话，已经加载过的浏览器可能会有缓存，导致新的图标字体不会重新下载，所以需要处理这个问题。最简单的就是在上面的@font-face导入的url里面添加一个版本号的参数：

src:    url(‘fonts/icon-font.eot?hadf22‘);

或者更彻底的：改变文件名、路径名。

3. 多人协作

icomoon免费版的数据是存储在浏览器的本地数据库的， 商业版交点钱可以把数据放在云端，从而实现多人协作。免费版也可以实现多人协作，方法是将别人生成的字体svg导进去再添加，生成新的svg字体，同样别人要再上传的时候先上传这个svg。商业版使用的时候需要注意多人同时操作的情况，有可能会同时生成相同的编码。阿里也提供了一个在线的图标字体制作网站：http://www.iconfot.cn，和icommon相比，没有提供编码的方式只能够使用HTML实体的方式。另外icommon还提供了在线编辑的功能还有大量图标的搜索功能，商业版提供woff2字体下载。

图标字体的缺点

图标字体有一个显而易见的缺点，不支持多色图标。因为它是一个字体，决定了它只能是单色的。如果实再是要使用多色的图标，甚至带一些特殊效果的那就使用SVG吧。

结合使用SVG

对于多色的图标，可以在页面插入一个SVG：

左边的location的图标就是使用了svg，效果比直接贴一张PNG好很多

SVG的兼容性，除了IE 8不支持，其它的都还好。况且现在很多新项目都不再兼容IE 8了，不然连个border-radius都用不了。

有几种使用SVG的方法：

1. 直接copy到页面

例如，后端如果用的是JSP，那么可以借助include功能：

<%@ include file="loc-svg.jsp"%>

loc-svg.jsp里面的内容就是svg：

借助jsp嵌套svg

这样做的缺点是浏览器没办法缓存，同时会阻碍页面的加载

2. 使用embed

<embed src="loc.svg" width="100"  height="200"/>

当小个的SVG过多的时候，可能要考虑把多个小的SVG合并成一个SVG，就像雪碧图那样：

3. 合并SVG

如下所示：通过一个个的symbol，将多个svg合在了一起，同时将每个symbol svg定义一个id，使用的时候会用到

<svg>
    <symbol viewBox="0 0 101.5 57.9" id="active-triangle"><path fill="#15c0f1" d="M100.4.5L50.7 57.1 1.1.5h99.3z"/>
    <symbol viewBox="0 0 101.5 57.9" id=“logo"><path fill="#15c0f1" d="M120.4.5L50.7 57.1 1.1.5h99.3z"/>
</svg>

使用的时候通过外链的办法将svg引到页面上，如要用到上面定义的logo，通过“文件名#ID”的方式：

<svg viewBox="0 0 100 100">
    <use xlink:href=“icon.svg#logo"></use>
</svg>

然而蛋疼的IE不支持外链，但是有人写了个插件，可以让IE支持，原理是检测到浏览器不支持外链的时候就将其外链替换成相应的svg内容，详见svg for everybody

使用SVG的还有highCharts和d3.js等。

至此，整个流程说明完毕~ 图标字体和SVG结合使用，提高网站的高清度。

时间： 2024-10-05 05:11:18

图标字体 VS 雪碧图——图标字体应用实践的相关文章

把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.

用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com/package/gulp-css-spriter  (官网gulp插件) 第三步:在gulpfile.js 文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var gulp = require('gulp'); var spriter = require('gulp-css

多个图标图片（雪碧图）使用CSS样式显示

现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务器的并发连接数是受限的,通常是4~8个,那么图标显示过慢或者超时的情况就会发生. 当然了,像采用CDN,或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的,但不是都有这样的条件. 一般都会把图标文件做的尽可能小,尽管如此,1张50k的文件比起50张1k文件下载起来还是很有优势的. 那

使用 Compass 生成雪碧图

使用 Compass 创建一个项目 要在一个新项目中使用 Compass,可以打开命令行工具并输入如下指令 compass create my-project 如果 my-project 目录不存在,上述命令会创建一个叫做 my-project 的目录,并在其中添加以下文件: 如果你没有为compass create命令传递一个目录参数,它将使用你当前所在的目录. 在config.rb文件中,你可以对Compass的一些配置进行修改,例如资源位置和压缩程度.sass目录包含了一些初始的样式表,你

快速获取雪碧图的图标样式插件 - gulp-css-spriter教程

如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com/package/gulp-css-spriter  (官网gulp插件) 第三步:在gulpfile.js 文件 var gulp = require('gulp'); var spriter = require('gulp-css-spriter

自适应页面中如何使用雪碧图

自适应页面你肯定听说过,雪碧图想必你也听说过,不过在自适应页面中使用雪碧图应用的场景却不多,因为很多场景里自适应页面(移动端页面)的小图标啥的基本都做成字体图标了,操作起来也比较方便,不过有时候合成字体图标的时候也比较麻烦,AI制作复杂svg矢量图标很麻烦,今天说的这个应用场景用的就是这个情况: 首先你要知道什么是雪碧图,不知道的先科普之,百毒传送门: 上面说到有的场景添加字体图标很麻烦,如果不理解看下图就明白了: 没错,就是这个国旗,有几十个国家的,这要搞成svg矢量图那要累死了(如果有大神有

前端工程师技能之photoshop巧用系列第五篇——雪碧图

显示目录 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇--雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提

compass与css sprite（雪碧图）

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转

css 雪碧图 及jquery定位代码

无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(sprite) 也叫雪碧图. CSS知识点: background-image backgorund-position 特点: 相对于当个小图标,它节省文件体积和服务请求次数.将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利