展示这些小图标的方法有很多种,但FontAwesome的图

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

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

图片 1

使用PS合并多个形状图层

把UI图里的小图标制作成icon font,uiicon

      一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的的制作方法:在PS里面导出svg,制作字体图标。这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上。

      使用sprites图可以自行用PS将多个小图标放至一张图:

      sprites图的缺点是不是矢量的,在适配布局里,在伸缩时可能会失真。而使用icon fonts是矢量放大无损的。

      接下来介绍制作icon fonts的方法。

      1. 需要安装PS、AI

      2. 下载一个PS的脚本:PSD to SVG,按照里面说明的办法,将脚本放到PS的脚本目录:Adobe Photoshop/presets/scripts,重启PS。

      3. 将图层里面的icon形状图层复制到一个新文档,并将图层重命名为.svg后缀结尾。弄成svg结尾主要是为了脚本识别哪些图层要进行转换。注意图层命名最好用字母数字和下划线,不然可能会出问题。

      4. 执行文件->脚本->PSD to SVG脚本,可能会提示没有保存文档,所以执行前先把新建的图层保存为一个文件。

      6. 执行完脚本后会在psd所在的目录生成两个文件,一个svg和一个ai

      7. 用AI打开生成的ai文件,发现只有左下角有一个点显示出来了,如下图左显示,当把鼠标放上去的时候发现那些path是存在的,只是没显示出来。

      8. 所以在AI里面把它填充一下,把显示出来的部份填充成黑色,然后另存为svg:File->script->saveDocs as Svg

图片 2

       9. 接下来,借助icomoon,制作字体。打开icommon(如果打不开,得使用代理因为这网站使用了谷歌的一些服务),点击右上角的Import Icon按钮,导入上面保存的svg文件。

       icomoon就会跳到select页面,选中刚刚导入的图标:

      再点击右下角的Generate Font:

      跳到了生成好的icon页面,点击get code:

      观察它的使用代码,发现这个图标被拆成了6个span表示6个path,还要调节它们的间距。这不是想要的结果,理想的结果应该是只要一个span表示这个图标就好了。

      根据icomoon的给出的提示:

To avoid multicolor glyphs, reimport your SVG after changing all its colors to the same color.

      发现是由于各个部份的颜色不一致导致的,上面设置没有显示出来的其它5个部份和已经显示出来左下角那个点的颜色不一致,于是把它们调成一样的。

      这里使用linkscape进行编辑,因为linkscape可以直接编辑svg源代码,更加直观,打开用PS生成的还没改过的svg文件:

       可以看到,之所以会没显示出来,是因为fill属性设置成了none,所以把它们都改成和左下角那个都一样的颜色:

      保存后上传到icomoon,再点get code,生成的字体就是完整的一个实体了:

      下载后打开,生成的字体文件放在了fonts目录下,同时icomoon提供了demo,使用时,通过一个@font-face导入字体文件:

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?3hb5tb');
    src:url('fonts/icomoon.eot?3hb5tb#iefix') format('embedded-opentype'),  /*为了支持低版本的IE*/
        url('fonts/icomoon.ttf?3hb5tb') format('truetype'),
        url('fonts/icomoon.woff?3hb5tb') format('woff'),
        url('fonts/icomoon.svg?3hb5tb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

     如果不需要支持ie8及以下,可以像上面的示例一样用一个before或者after的伪类,如果需要的话,就在html文件里面用实体代码吧,例如上面的菜单按钮是:



      当然也可以用icommon提供的大量免费的图标和搜索功能,但是使用这些图标的缺点是大小可能是不一致的,导致在UI里面原本相同大小的字体图标需要设置不同的的字体大小。而使用UI图制作的svg大小比例就会贴近UI图,无需设置多个font-size。

      需要注意的是,如果以后还要再导入新的图标,需要在原先的基础上添加,icommon支持导入project,将上面的下载的包里面的selection.json导入即可。如果把之前的icon和新的icon再导入一次,会导致之前的icon的编码发生变化。

      上面使用了用AI/linscape的方法修正PS导出的ai/svg文件,也可以直接用文本编辑器修改svg文件。

      有的时候,可能需要手动调整下svg的结构,例如上面的搜索框,在PS里面设计师是画了两个圆和一条线,如下面所示:

<svg version="1.1" width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 外面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0z"/>
<!-- 里面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

     如果两个圆的fill颜色都设置成一样的灰色的话,那么生成的文件是这样的:

      里面那个圆的fill属性的作用导致放大镜中间被填充了,因此需要手动改一下,将两个圆放到同一个path,这样围起来的路径就是一个环:

<svg width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 把两个圆放到一起形成一条封闭的路径,即一个环 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0
    M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

      生成的放大镜就正常了:

      还有的图标可能是由多个图层组成的,这个时候需要分别生成svg,然后放到一起,用Inkscape或ai调下相对位置。这里需要点svg的知识,可以参考MDN上的svg教程。

      最后再比较下大小,把上面第一张sprites图里面的9个小图标都制作成icon fonts,生成的文件大小为:

      最大的为6.6KB,小的为2.6KB,而上面生成的sprites图为7.1KB,用tinypng压缩后为3.0KB。可以看到,如果只有几个图标并且图标本身就比较小时,在文件大小上,icon-font比sprites图的优势并不明显。当图标增加到18个,即把上面的图标再导入一次,现制作的icon-fonts大小为:

      18个icon-font的最大svg格式的为13kb,最小的为4.1KB,sprites图为6KB,考虑到svg格式的并不太会可能被浏览器下载, 如下图所示。所以在文件大小上,icon-fonts还是比sprites图有优势的,如果图标个数不多的话差别不大。如果图标需要展示得很大的话,icon fonts的优势就很明显了。

IE6 仅支持 Embedded OpenType(.eot) 格式。
IE7 仅支持 Embedded OpenType(.eot) 格式。
IE8 仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5 支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Safari 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Opera 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

来自w3 help

      使用sprites图的另外一个缺点是,在移动端低配置的设备,可能会给内存和CPU带来很大的压力,如果sprites图太大的话。而icon font的最大优点是矢量无损,缺点是只能支持单色的图标,因为它是一个普通的字体,还有在制作上稍麻烦。

 

参考:

      1. 使用css3新属性clip-path制作小图标

      2. icomoon,制作icon font的在线工具

      3. PSD to SVG

 

 

 

font,uiicon 一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者...

title

      但是要看到这种方法也是有缺点的,即内存和CPU的使用增加,对于移动端低内存和CPU的设备来说,可能会有压力。使用sprites图,网上有很多在线的功具可以生成,同时会生成各个小图标的position位置,例如

主要步骤:

步骤一:使用矢量图形编辑器设计图标,画布最好设为512px*512px。以Adobe Illustrator为例,保存为svg格式时会弹出一个svg图片属性设置对话框。这时候请按下图设置选项,

图片 3上图来自Filament Group

步骤二:将svg图标文件导入Glyph字型排版工具编辑调校,生成icon-font字体文件

步骤三:制作与字型编码匹配的CSS文件供网页调用

以下介绍的四大类型的icon-font制作方法的最大分别在于第二和第三步,也就是使用什么工具编辑和生成字体的不同,及是否自动生成CSS文件的区别。本文会忽略第三步CSS文件的制作的过程,重点介绍第二步的差别和心得。

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

如下,读者可找下区别:

图片 4

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

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

CSS

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

1
2
3
4
.icon{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

一.iconfont使用场景(优缺点);

一般我们项目决定要使用一个技术点前,会查相关资料对其有大概的理解。例如, 这次要使用iconfont实现功能, 理解相关资料后归纳、总结出它的优、缺点以及它的使用场景。

图标字体优、缺点:

1.优点;

轻量(文件体积小)、灵活(样式可改变图标)、兼容性好(IE8+)。

2.缺点;

图标只能单色调(太复杂的多色图标无法实现)、生成图标字体相对花时间。

跟webfont一样iconfont实现的关键代码是“@font-face”(细谈CSS@font face)查看其浏览器兼容信息为IE8+:

图片 5

@font-face兼容

低版本浏览器其实也有方法兼容,icoMoon是图标字体开发时生成字体文件及demo的网站,用过icoMoon的同学都知道其有一个“Support IE 7”选项, icoMoon IE7支持实现原理:样式上用*zoom 触发重绘(触发haslayout), 脚本上检测 关键字className动态插入dom节点实现;考虑到IE7目前的市场份额,以及该方式带来的性能消耗,本人不建议去兼容。

另外,图标只能单色调这个问题也有办法解决,阿里巴巴iconfont+ 也是图标字体开发时生成字体文件及demo的网站;阿里巴巴iconfont+ 生成的demo可以解决图标单色调问题,其原理是 生成svg合集, 然后使用svg呈现图标。但该方式兼容性较差(SVG兼容小结), 如是移动端开发不考虑低版本浏览器兼容问题可以尝试该方式。

根据以上图标字体的优缺点, 个人总结的使用场景如下:

1.web app(H5) 小图标 放大失真问题解决;

移动页面大多数情况没办法用雪碧图,用了雪碧图表示图片大小固定了,而移动端需要兼容不同屏幕大小的移动设备,这就需要图片是可以根据屏幕尺寸而改变的。 如果你的图尺寸是固定的,那就可以用雪碧图。

2.PC端小图标性能更佳、小图标尺寸修改不用改原图;

PC端页面优化,可将部分雪碧图换成小图标,字体图标比雪碧图的http请求少、体积小;(加载一个页面时分模块开发关系可能有多张雪碧图,但使用字体图标,文件一个就够)

PC端做换肤业务时,使用了字体图标实现起来更加的优雅、方便。(之前做页面换皮肤功能时发现换肤时小图标得多出一套雪碧图略麻烦, 如果是字体图标直接更新颜色样式就OK)

知乎、斗鱼、Bilibili这类网站不少地方使用了雪碧图,如果我们维护这类网站,能用图标字体替换么?

从两方面考虑:

1.开发时间成本问题, 使用自定义图标字体替换雪碧图需要一定时间,如果要求快速更新小图标建议维持用雪碧图;

2.字体小图标兼容、单调色问题, 如果网站需要兼容低版本浏览器、且图标复杂、或者多色那还是得用雪碧图。

图片 6

B站

图片 7

知乎

图片 8

斗鱼

所以实现小图标时雪碧图 跟 图标字体会在一个网站共存,自定义图标字体 为什么比较耗时,且太复杂图标无法实现?请往下看iconfont开发流程就了解了。

  注意到,icon-font和clip-path本质都是一样的,都是使用了svg,只是使用的方式不同。因此在提供icon font图标的网站上,如icomoon和fontello上,可将图标的svg制作字体,也可作为clip-path使用。

1. 速成系 :一步到位

在线icon-font生成器,比如icomoon.io或fontello + 自制CSS文件

图片 9icomoon的icon-font生成器界面

IcoMoon和Fontello都支持直接拖拽svg格式的图标到网页上传图标,即时在线预览不同字号的图标字体效果,批量编辑图标的CSS class名称和Unicode编码,以及下载为全套web字体及CSS文件,可谓相当方便。

倘若下载之后发现其中某个图标的名称或编码需要修改,而icon-font生成器已经被关闭,如果你需要编辑的图标不超过10个,那么恭喜你,你依然有机会在几分钟内完成图标字体的生成。但是如果需要修改的图标太多,那么这种免费的在线编辑器恐怕会成为你的噩梦。

由此可见,免费的在线图标编辑器只适合小批量快速的图标编辑,图标的质量取决于你在svg文件设计时的质量。

当然,如果你想使用在线的icon-font生成器服务于大型的图标字体项目也不是不可以。icomoon就推出了Premium付费服务,你只需注册并按使用期限付费,就可以在线保存icon-font编辑项目了。

速成系方法适合不擅长设计,想要快速获得定制图标库的开发者。

3. 多人协作

icomoon免费版的数据是存储在浏览器的本地数据库的, 商业版交点钱可以把数据放在云端,从而实现多人协作。免费版也可以实现多人协作,方法是将别人生成的字体svg导进去再添加,生成新的svg字体,同样别人要再上传的时候先上传这个svg。商业版使用的时候需要注意多人同时操作的情况,有可能会同时生成相同的编码。阿里也提供了一个在线的图标字体制作网站:

二.iconfont开发流程;

接下来就是本文篇幅最大的章节, 我将从自己实现图标字体小demo上详细的列出所有步骤。

使用免费图标字体:

如果网站使用的不是自定义的图标字体,而是网上开源的免费图标那实现上将非常的简单;

例如, 我要使用阿里巴巴iconfont+ 上的图标字体, 进入网站并登陆(可以用github账号登录),从图标库选取自己喜欢的图标:

图片 10

iconfont+

这里我选取了三个小图标,点击右上角购物车,将选取的图标添加到新建项目,然后点选“下载至本地”:

图片 11

iconfont+_2

下载下来的压缩包就包括了 三小图标字体文件, 以及三种实现方式的demo;

图片 12

下载目录

下载图标字体的三种用法,打开对应html(demo_fontclass.html、demo_symbol.html、demo_unicode.html)文件即可了解(也可直接打开我demo里的这三个文件查看用法,所以用法这里不冗述了);有4个字体文件(EOT/SVG/TTF/WOFF)是为了兼容所有浏览器,因为不同浏览器对字体格式兼容是不一样的:

图片 13

字体文件兼容

使用自定义图标字体:

实际开发中基本都是使用自定义生成的图标字体,大致步骤如下:

1)使用PS-矩形工具 生成图标;

2)AI软件打开PSD文件,File->Scripts->SaveDocsAsSVG 生成SVG文件;

3)访问阿里巴巴iconfont+(或iconMoon)上传SVG生成字体文件;

PS: 教程雪碧图vs图标字体中多了PS导出AI文件的步骤,经实践PS生成的AI文件打开容易显示空白,且AI软件可直接打开PSD文件,该步骤可省略.

其实生成自定义图标字体一般交给设计部同事完成(可能设计同事是用Sketch而不是PS生成小图标), 因为要了解整个流程细节,所以请教了设计部同事生成自定义图标字体的技巧跟方法; 这里就分享下生成自定义图标字体的具体流程:

首先,下载生成小图标的软件: PS(Photoshop)、AI(Adobe Illustrator);

图片 14

PS

PS下载地址:mac 版、windows版

图片 15

AI

AI下载地址:mac 版、windows版
1)使用PS-矩形工具 生成图标;

预计demo功能: 三个小图标:笑脸、黑脸、帽子; 默认显示笑脸+帽子,鼠标hover,变成黑脸+帽子(颜色变绿);

将要实现的小demo将有三个小图标, 接下来就使用PS生成这三个小图标;

无论是用Sketch还是Photoshop绘制小图标的思路都差不多,使用各种基本图形相加相减得到想要的小图标;所以太复杂的图形实现起来会耗时甚至无法实现。(PS矢量小图标制作、Sketch小图标制作技巧)

笑脸PSD:

使用PS新建165px * 124px 图层, 使用 “圆角矩形工具”创建100px*100px的圆(颜色#666):

图片 16

圆形装

继续用 “圆角矩形工具”绘制小图标的眼睛(为了直观可改成白色):

图片 17

添加眼睛

ctrl+e(command+e) 合并形状并选择“排除重叠形状”:

图片 18

合并形状

小图标的嘴巴有点复杂,使用钢笔工具或使用两个圆形相减(“排除重叠形状” )+矩形工具(“与形状区域相交”)生成嘴巴:

图片 19

形状嘴巴

然后 ctrl+e(command+e) 合并形状并选择“排除重叠形状”生成笑脸:

图片 20

笑脸完成

黑脸PSD:

与笑脸PSD一样流程, 只把嘴巴旋转180度就行:

图片 21

黑脸

帽子PSD:
使用PS新建165px * 124px 图层, 使用 “椭圆工具”创建150px20px的椭圆(颜色#666),然后画一个90px110px的椭圆:

图片 22

双椭圆

在第二个椭圆图层使用矩形工具(“减去顶层形状”)删减该椭圆内容然后与第一个椭圆 ctrl+e(command+e) 合并形状:

图片 23

帽子生成

2)AI软件打开PSD文件,File->Scripts->SaveDocsAsSVG 生成SVG文件;

生成三个小图标的PSD后,我们使用AI软件打开三个文件, 然后分别处理生成SVG文件:

图片 24

存储为SVG

图片 25

svg

3)访问阿里巴巴iconfont+(或iconMoon)上传SVG生成字体文件;

将上述步骤生成的SVG文件在阿里巴巴iconfont+中上传,然后这几个小图标就在“我上传的icon”中:

图片 26

上传

图片 27

拖拽文件

图片 28

提交

图片 29

我的icon

将图标添加入库, 然后添加到项目, 最后就能下载字体及demo到本地了:

图片 30

添加入库

图片 31

加入项目

图片 32

准备下载

字体文件下载好后, 就能轻松实现我的小demo:

图片 33

小demo

小demo演示地址;

  关于兼容性,IE和edge所有版本不支持clip-path,android的浏览器支持url参数的clip-path,但是UC和微信的内置浏览器不支持,微博的浏览器是支持的,firefox支持带url参数的。chrome支持-webkit-前缀的,包括基本的形状和url,safari/ios支持标准形式的,但是safari/ios在渲染上有bug,只要css文件里出现了clip-path,任何元素只要带position为relative/absolute的都会隐藏掉了,解决办法是,在这些元素里加多一个css属性:-webkit-transform: translateZ(0)加大渲染权重,这样就能显示出来了。还有可能会出现其它无法渲染的情况,例如,同一个id的clip-path只能渲染出第一个,接下来的都消失了,也可以用这种办法解决,但是如果渲染过重,在chrome等其它浏览器会出现显示的问题,会显示错乱。因此这个问题比较麻烦,h5开发的时候需要注意。

4. 竹林系:搞定命令行如有轻功(Mac/Linux)

矢量图形编辑软件(Adobe Illustrator)+FontCustom命令行

图片 34Font Custom网站截图

我尝试用过两次,第一次是在几个月前,搜索icon-font制作指南时发现了放在Github上的开源项目FontCustom,但那是因为不是很明白这类基于RubyGems的工具的安装运行原理,所以没有安装成功。

第二次尝试是在今天,因为重装过Yosemite的Mac系统,于是从零开始跟着安装指南安装了RubyGems,Brewhome,FontForge。据说只要运行一句命令行,程序会自动把存有svg源文件的图标自动生成为webfonts,同时会生成css文件和HTML预览文件。

现有的一个icon-font库Ionicons的目录结构及Cheatsheet预览页面的样式就同FontCustom非常相似。他们都是基于Python的程序自动生成的。

用户可以自己在yml文件中设定模板生成参数,支持直接生成到指定路径的文件夹,或是生成scss版本等。如果掌握了FontCustom命令行生成icon-font的方法,则无需依赖在线的icon-font生成器,可以在本地意见生成icon字体和全套的页面文件。这就使得图标的修改更新和预览非常方便,也非常方便团队协作。

但没有什么是完美的。FontCustom虽然长远看来十分方便,但是如果没有命令行使用经验,要自己安装和上手是有些复杂的。

另外在安装fontCustom时用到了一个listen的package,安装时提示2.8.4的版本503错误,最后是手动安装了listen的2.8.3的版本,才得以继续FontCustom的安装。

另外fontCustom在生成文件的模板设定上还需要下一番功夫,才能让生成的文件版本、名称和结构称心如意。

结合使用SVG

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

 图片 35

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

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

有几种使用SVG的方法:

  1. 直接copy到页面

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

JavaScript

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

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

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

图片 36

借助jsp嵌套svg

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

  1. 使用embed/object

XHTML

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

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

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

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

  1. 合并SVG

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

XHTML

<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>

1
2
3
4
<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”的方式:

XHTML

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

1
2
3
<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结合使用,提升网站的高清体验。

1 赞 2 收藏 1 评论

图片 37

图片 38

参考:

2. 尊贵系:专业级的体验

矢量图形编辑软件(Adobe Illustrator)+Glyphs/Glyphs Mini/FontLab + FontSquirrel WebFont Generator+ 自制CSS文件

尊贵系,顾名思义,需要花费不少银子才可以获得正版使用权。

其中的Adobe Illustrator不用多说,是矢量图形设计利器。自Adobe推出CC按月付费以来,设计师对于Adobe软件的支出便成了无底洞。虽然Affinity Designer, Sketch等众多支持矢量图形编辑的软件纷纷推出满足一次性付费的图形编辑器市场的需求。但是毕竟这些新应用或多或少还有一些Bug,稳定性短时间内难及Illustrator。当然,如果你对其他矢量图形编辑软件有信心,在这一步把Adobe Illustrator替换成其他你心仪的图标编辑软件,甚至直接使用接下来介绍的Glyphs制作亦可。

图片 39Glyphs

Glyphs是一套专业级的字形编辑器,完整版的价格约人民币2000元,支持直接在Glyphs里创建矢量字形。Glyphs Mini相比Glyphs主要保留了SVG导入,字体命名及字体文件导出的功能,价格约为完整版的十分之一。

全套价格不菲,如果你已是Illustrator的重度使用者,建议配合Glyphs使用。可视化的节目适合专业的字体设计师,及不愁经费的个人及团队。相比接下来要介绍的开源系,Glyphs相信在字体编辑导出的效率上会大大提高。

图片 40FontLab TransType可用于转换字体,导出不同格式的字体文件

FontLab公司出品的一系列字体编辑转换工具与Glyphs类似,FontLab Studio也是专业级的,支持Mac和Windows平台。因为没有使用过,这里就不赘述。

使用Glyphs导出icon字体文件后,可以使用Font Squirrel网站提供的Webfont生成器上传由Glyphs导出的.ttf格式字体,然后选择默认的Optimal选项,最后“Download Your Kit”,生成器就会默认生成包括.eot, .svg, .ttf, .woff, stylesheet.css及Demo页面的文件。不过icon-font字体有时无法正常在它生成的Demo页面正常预览到。这个Font Squirrel的字体生成器会更加适合英文字体的生成和排版效果预览。

图片 41FOnt Squirrel Web Generator截图图片 42如果你想高度定制导出的WebFont Kit的文件类型,可以选择Expert进行更多设置

雪碧图不方便变化

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

图片 43
图片 44

选中或者hover时反色

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

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

之前写了一篇关于雪碧图的博文, 评论里有说用http2、或用SVG也有说用图标字体代替,大家知识面是挺广,但深入了解技术点的似乎却不多,否则不会有雪碧图过时无用,用http2或图标字体取代就好了的想法;http2后续有时间再写一篇个人实践、理解博文, 本文主要讲图标字体(iconfont)技术点,从实践开发角度讲述个人对图标字体的理解。

  对于无法支持的浏览器,改用其它的办法,得做个区分。可以借鉴modernizr提供的办法,页面加载时,首先创建一个svg和一个div,设置这个div的clip-path CSS属性,然后调用getComputedStyle看是否仍有刚刚设置的属性,如果有说明支持,没有说明不支持。如果支持就给body添加一个has-clip-path的类,不支持就为no-clip-path,然后在需要使用图标的元素的css前面加多一个clip-path的类,有和没有两个。这样就达到了区分的目的,不支持的就使用其它的方式。

因为想为公司的产品定制一套icon-font,把曾经那些不易改变不易调校大小颜色的图片改成图标字体,经过搜索和试用,发现icon-font大致有四类制作方法。这四类方法的图标生成原理是一样的,

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

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

图片 45

生成的svg是fill:none

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

三.iconfont实践注意事项.

1.生成图标字体注意事项;

图片 46

生成图标注意点

截图来自阿里巴巴iconfont+;

更多生成图标字体注意点,请阅读参考资料中《雪碧图vs图标字体》->如何制作图标字体;

2.使用图标字体注意事项;

跨域问题

1)配置自己的服务器;

# For Apache
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
# For nginx
location ~* .(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

2)放在同一个域;

3)使用base64置入CSS中(Icomoon在导出图标时,设置里勾选Encode & Embed Font in CSS选项,IE8+支持base64)。

字体图标出现锯齿的问题

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

@font-face与性能问题

1)只在你确定你非常需要 @font-face的时候才使用它;

2)将你的@font-face定义在所有的script标签前;

3)如果你有许多字体文件,考虑将它们分散到几个域名下;

4)不要包含没有使用的 @font-face声明——IE将不分它使用与否,通通加载;

5)Gzip字体文件,同时给它们一个未来的过期头部声明;

6)考虑字体文件的后加载,起码对于IE。

--以上使用图标字体注意事项来源《浅谈图标字体》;

关于字体文件跨域可能是大家最关心的问题, 三种解决跨域的方式中base64至入CSS是比较主流的做法,例如 小米官网 的小图标就是用base64至入CSS中实现。

Icomoon在导出图标时,设置里勾选Encode & Embed Font in CSS选项

目前 Icomoon 勾选生成base64样式会出现收费的问题,那目前实现base64至入CSS有哪些方式呢?
1.使用在线 网站将字体文件 生成base64样式;
百度关键字“图标字体转base64”能找到不少, 这里推荐 转base64在线工具;

图片 47

在线工具.png

在线工具要求源文件不能大于100K,如果文件过大可以考虑本地构件工具;
2.使用webpack、gulp等构件工具在本地将字体文件转成base64样式;
本demo使用 gulp base64实现转换:

图片 48

gulp base64配置

PS: 本demo的“base64”指令 配置的有点粗糙, 如果在生产中会考虑 接受参数 以及 自动将生成的样式合并到 指定样式文件等,大家可以查看 gulp base64官网了解更详细的使用方法。

参考资料:

细谈CSS@font face;

浅谈图标字体;

SVG向下兼容优雅降级技术;

Sketch 绘制小图标技巧;

雪碧图vs图标字体;

PS矢量小图标设计;

本文对应源码:

github源码地址;

demo演示地址;

  这样就可以了。这篇文章作者作了一个圆形菜单,还有结合css3的动画,作了一些很有趣的动态效果。

小结

以上四大类的icon-font生成方法适用于不同的项目和人群,欢迎自行挑选。尊贵系的部分软件因为没有亲自购买体验,描述全靠印象。个人目前使用icon-font的项目属于长期需要优化修改且需要团队协作的大型web应用,所以个人选择使用第四种方案,也就是FontCustom。

至于icon-font制作的第一步,也就是SVG icon设计的部分其实也是一个很有学问的步骤,尤其当icon要面对不同字体的挑战时,尤其是14px以下的字体时,有可能显示不清或是有锯齿,这就需要在图形构思方面下更多功夫。

今年最让我喜欢的icon-font库不是FontAwesome,而是Drift公司为旗下ionicFramework配套设计的icon-font Ionicons。今天的icon-font图标研究少不了对Ionicons 2.0的文件结构的研究。从样式上看,Ionicons或许也使用了FontCustom生成字体,不过他们高度定制了Python Script,实现了更加进阶的诸如CheatSheet生成的功能。

最后,icon-font只是用于网站图片展示的方法之一,不见得适用于所有项目,尤其是基于Marketing的小型项目,有时直接使用svg或png图片效率更高。

欢迎有兴趣的朋友参与讨论。

使用一个脚本自动导出svg

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

图片 49

使用PSD to SVG增加便利

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

2. SVG Tutorial,MDN一个关于svg的简明易懂的入门教程。

参考资料

A Designer's Guide to Grumpicon

Markup-free icon fonts using unicode-range

Atlassian: How to make an icon-font: the 8 step guide

如何制作图标字体

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

图片 50
图片 51

  1. 选中图标的图层

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

图片 52图片 53

  1. 左: PS里导出AI文件,右:AI里面导出SVG

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

图片 54

  1. 上传到icomoon

最后生成字体并下载:

图片 55

  1. 生成几种规格的字体

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

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

图片 56

2. 开源系:尊贵系能做到的,我也可以,只是...(Windows/Linux/Mac)

InkScape + FontForge + FontSquirrel WebFont Generator

不同于尊贵系,这一系的软件全部是开源的,支持全平台。

InkScape是一款开源的矢量图形编辑工具,点击菜单栏Text > Glyph即可进入字型编辑面板。不同于Illustrator只能浏览自行,InkScape的Glyph还可以将当前选中的图层添加到为新的Glyph。不过过程稍稍麻烦,这就是开源软件的不便之处。毕竟缺少组织性的综合产品设计规划与开发,InkScape看似功能俱全,但界面图标设计和易用性欠佳。

FontForge是一款开源的字体编辑工具,在windows和Linux上上有GUI版本,在Mac上可以通过命令行安装。虽然功能上几乎接近专业级的收费软件Glyph,可以导入svg文件,编辑字体信息,调整字型样式,但是在体验上真的谈不上方便,不少操作有些繁杂,有一些明显的Bug。但它毕竟是开源的软件,并且在2014年中重新开始了开发与更新。

本文由必威发布于必威-前端,转载请注明出处:展示这些小图标的方法有很多种,但FontAwesome的图

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。