登录  /  注册

图标字体 VS 雪碧图图标字体应用实践 - 会编程的银猪

php中文网
发布: 2016-05-20 13:49:34
原创
1574人浏览过

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

雪碧图

雪碧图实例:淘宝PC端

雪碧图:将多张小图放至一张大图<

将多张小图放至一张大图

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

雪碧图的使用方法

雪碧图的使用方法

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

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

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

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

Chrome同时最多加载资源数为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文件,把多个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增加便利

使用PSD to SVG增加便利

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

图标字体的使用

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

<span style="color: #800000;">@font-face </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> 'icon-font'</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;">    url('fonts/icon-font.eot')</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;">    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')</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;
}<span style="color: #800000;">

.icon</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "icon-font":
</span>}
登录后复制

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

图标字体的两种使用方法

图标字体的两种使用方法

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

在使用过程中遇到的坑:

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

如下,读者可找下区别:

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

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

<span style="color: #800000;">.icon</span>{<span style="color: #ff0000;">
    -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased</span>;<span style="color: #ff0000;">
    -moz-osx-font-smoothing</span>:<span style="color: #0000ff;"> grayscale</span>;
}
登录后复制

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功能:

登录后复制

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

借助jsp嵌套svg

这样做的缺点是浏览器没办法缓存,同时会阻碍页面的加载。优点是由于是内联的,可以直接用CSS控制svg的样式

2. 使用embed/object

<span style="color: #0000ff;"><span style="color: #800000;">embed </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="loc.svg"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;">  height</span><span style="color: #0000ff;">="200"</span><span style="color: #0000ff;">/&gt;</span></span>
登录后复制

除此之外,还可以使用img标签,将svg的路径作为src属性,这种方法的缺点是没办法用CSS控制样式。还可以转化为base64的方式。更多使用SVG的方式参见:Using SVG

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

3. 合并SVG

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

<span style="color: #0000ff;"><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">symbol </span><span style="color: #ff0000;">viewBox</span><span style="color: #0000ff;">="0 0 101.5 57.9"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="active-triangle"</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">path </span><span style="color: #ff0000;">fill</span><span style="color: #0000ff;">="#15c0f1"</span><span style="color: #ff0000;"> d</span><span style="color: #0000ff;">="M100.4.5L50.7 57.1 1.1.5h99.3z"</span><span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">symbol </span><span style="color: #ff0000;">viewBox</span><span style="color: #0000ff;">="0 0 101.5 57.9"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">=“logo"</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">path </span><span style="color: #ff0000;">fill</span><span style="color: #0000ff;">="#15c0f1"</span><span style="color: #ff0000;"> d</span><span style="color: #0000ff;">="M120.4.5L50.7 57.1 1.1.5h99.3z"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span></span></span></span></span></span>
登录后复制

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

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">viewBox</span><span style="color: #0000ff;">="0 0 100 100"</span><span style="color: #0000ff;">&gt;</span> 
    <span style="color: #0000ff;"><span style="color: #800000;">use </span><span style="color: #ff0000;">xlink:href</span><span style="color: #0000ff;">=“icon.svg#logo"</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">use</span><span style="color: #0000ff;">&gt;</span> 
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">&gt;</span></span></span>
登录后复制

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

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

 

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

 

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号