【必发88】图标字体,把UI图里的小图标制作成icon

by admin on 2019年3月22日

图标字体 VS 7-Up图——图标字体选取实践

2017/04/05 · HTML5 · 1
评论 ·
图标字体

初稿出处:
人人网FED博客   

本文介绍使用图标字体和SVG取代七喜图的措施。Coca Cola图是司空见惯网站平常利用的一种技术,不过它有欠缺:高清屏会模糊、不可能动态变化如hover时候反色。而使用图标字体能够全面化解上述难点,同时负有包容性好,生成的文本小等优点。

把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. 下载3个PS的剧本:PSD to
SVG,依据内部表明的方法,将脚本放到PS的脚本目录:Adobe
Photoshop/presets/scripts,重启PS。

      3.
将图层里面包车型客车icon形状图层复制到多个新文书档案,并将图层重命名为.svg后缀结尾。弄成svg结尾首若是为了脚本识别哪些图层要拓展转移。注意图层命名最佳用假名数字和下划线,不然可能会出标题。

      4. 履行文书->脚本->PSD to
SVG脚本,恐怕会唤起没有保存文书档案,所以举办前先把新建的图层保存为三个文本。

      6. 执行完脚本后会在psd所在的目录生成五个文本,2个svg和二个ai

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

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

必发88 1

       9.
接下去,借助icomoon,制作字体。打开icommon(如若打不开,得使用代理因为那网站选用了谷歌的有个别服务),点击右上角的Import
Icon按钮,导入上边保存的svg文件。

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

      再点击右下角的Generate Font:

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

     
观看它的应用代码,发现那一个图标被拆成了四个span表示陆个path,还要调节它们的区间。那不是想要的结果,理想的结果应该是要是两个span表示这一个图标就好了。

      依据icomoon的交由的提示:

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

     
发现是由于种种部份的水彩不一致等导致的,上面安装没有展示出来的别的多个部份和曾经显得出来左下角10分点的水彩分化,于是把它们调成一样的。

     
那里运用linkscape举行编写制定,因为linkscape可以直接编辑svg源代码,特别直观,打开用PS生成的还没改过的svg文件:

      
能够见到,之所以会没出示出来,是因为fill属性设置成了none,所以把它们都改成和左下角那个都平等的水彩:

      保存后上传到icomoon,再点get
code,生成的字体便是完全的3个实体了:

     
下载后打开,生成的书体文件放在了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属性的功用导致放大镜中间被填充了,由此须求手动改一下,将四个圆放到同2个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图里面包车型大巴七个小图标都制作成icon
fonts,生成的文件大小为:

     
最大的为6.6KB,小的为2.6KB,而地点生成的sprites图为7.1KB,用tinypng压缩后为3.0KB。能够观望,假若唯有多少个图标并且图标自己就相比小时,在文件大小上,icon-font比sprites图的优势并不明朗。当图标扩充到贰12个,即把地方的图标再导入二遍,现制作的icon-fonts大小为:

     
二十一个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
2个相互比较多的UI图里面大概会有很多小图标,一般可用sprites图将七个小图标弄成一张大图,恐怕…

必发88 2

     
一般一个网页上面,或多或少都会用到一些小图标,显示那么些小图标的法子有很多样。最简便易行的做法正是将UI图上边的种种小图标都封存为图片,3个小图标就一张图纸。但这也是相比较笨的措施,因为浏览器同一时间最多加载的能源是有限的,例如IE7是贰个,IE8是五个,chrome是伍个,火狐是7个。借使网页上边有很多张零碎的小图片,导致请求的次数太多,等待加载状态中的财富会成千成万,分明震慑属性。因而,二个改进的艺术是行使sprites图,将多张小图放在一张大图,然后限定体现区域的大小,同时改变图片的来得地方background-position来显示分裂的图标,游戏里面平常应用这种技能,大大收缩浏览器请求的次数。Taobao网就利用那种技能:

雪碧图

Pepsi-Cola图实例:TaobaoPC端

必发88 3

将多张小图放至一张大图

选用的时候,通过background-position调整显示的地点,如下图所示:

必发88 4

七喜图的应用办法

应用七喜图唯一的长处,能够说正是压缩浏览器的哀告次数。因为浏览器同近来间能够加载的能源数是自然的,IE
8是五个,Chrome是三个,Firefox是捌个。为了印证,写了以下html结构:(那部份尽管某个跑题,然而很要要求商量一下)

必发88 5

验证Chrome同时加载个数的html–很多张不小的图片

然后在Chrome的开发者工具里面包车型客车Timeline能够看看Chrome确实是多少个5个加载的,每一趟最多加载五个:

必发88 6

Chrome同时最多加载能源数为五个

Coca Cola图的制作方法能够用node的一个的包css-sprite,十一分地便民。只要将图标做好,放到相应的文件夹里面,写好铺排文件运转,就能够转移对应的图纸和css,无需本身手动去调动职分等css属性。详见css-sprite

唯独,使用Pepsi-Cola图存在不可幸免的欠缺

title

必发88 7

百事可乐图的瑕疵

后面写了一篇关于七喜图的博文,
评论里有说用http2、或用SVG也有说用图标字体代替,大家知识面是挺广,但深远摸底技术点的就好像却不多,不然不会有7-Up图过时无用,用http2或图标字体取代就好了的想法;http2此起彼伏有时光再写一篇个人执行、通晓博文,
本文主要讲图标字体(iconfont)技术点,从执行开发角度讲述个人对图标字体的理解。

     
不过要看到那种艺术也是有缺点的,即内存和CPU的利用增多,对于移动端低内部存款和储蓄器和CPU的设备来说,大概会有压力。使用sprites图,网上有为数不少在线的功具能够生成,同时会生成各个小图标的position地方,例如

高清屏会失真

在2x的装置像素比的显示器上例如mac,假诺要高达和文字一样的清晰度,图片的上升幅度必要实际显示大小的两倍,不然看起来会相比较模糊:读者能够比较左边文字和左边图片里文字的清晰度

必发88 8

动手图片里的文字比左侧字体的文字模糊

专门是后日手提式有线电话机绝大部份是高清屏了,例如iphone 6 plus的分辨率高达了1918 *
1080,所以为了高清屏,使用七喜图大概要预备各类尺码的图形。

一.iconfont使用情形(优缺点);

一般大家项目决定要运用1个技术点前,会查相关资料对其有大致的精晓。例如,
此次要使用iconfont达成效益,
驾驭相关资料后综合、计算出它的优、缺点以及它的选择情状。

图标字体优、缺点:

1.优点;

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

2.缺点;

图标只可以单色调(太复杂的多色图标一点都不大概落到实处)、生成图标字体相对花时间。

跟webfont一样iconfont完成的重中之重代码是“@font-face”(细谈CSS@font
face)查看其浏览器包容音讯为IE8+:

必发88 9

@font-face兼容

低版本浏览器其实也有主意包容,icoMoon是图标字体开发时生成字体文件及demo的网站,用过icoMoon【必发88】图标字体,把UI图里的小图标制作成icon。的同班都掌握其有贰个“Support
IE 7”选项, icoMoon IE7帮助促成原理:样式上用*zoom
触发重绘(触发haslayout), 脚本上检查和测试关键字className动态插入dom节点落到实处;考虑到IE7近期的集镇份额,以及该方法带来的品质消耗,本身不提出去包容。

除此以外,图标只好单色调那一个题材也有法子化解,Alibabaiconfont+
也是图标字体开发时生成字体文件及demo的网站;阿里Baba(Alibaba)iconfont+
生成的demo能够消除图标单色调难题,其原理是 生成svg合集,
然后使用svg显示图标。但该办法包容性较差(SVG包容小结),
如是移动端支出不考虑低版本浏览器包容难点能够尝试该措施。

依照上述图标字体的利害, 个人总计的行使意况如下:

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

运动页面大部分地方不能用百事可乐图,用了Coca Cola图表示图片大小固定了,而移动端必要同盟分歧显示屏尺寸的移位设备,那就要求图片是足以依据显示器尺寸而改变的。
要是你的图尺寸是一定的,那就足以用Coca Cola图。

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

PC端页面优化,可将部分Pepsi-Cola图换到小图标,字体图标比Coca Cola图的http请求少、体量小;(加载3个页面时分模块开发关系恐怕有多张Pepsi-Cola图,但运用字体图标,文件三个就够)

PC端做换肤业务时,使用了字体图标实现起来越发的幽雅、方便。(此前做页面换皮肤功能时意识换肤时小图标得多出一套百事可乐图略麻烦,
假若是字体图标直接更新颜色样式就OK)

今日头条、斗鱼、Bilibili那类网站不少地点使用了Pepsi-Cola图,假设大家保险那类网站,能用图标字体替换么?

从两下边考虑:

1.费用时间资金财产难题,
使用自定义图标字体替换百事可乐图须要自然时间,如若供给急迅翻新小图标建议维持用Coca Cola图;

2.字体小图标包容、单调色难点,
假若网站须要般配低版本浏览器、且图标复杂、或然多色那照旧得用Pepsi-Cola图。

必发88 10

B站

必发88 11

知乎

必发88 12

斗鱼

为此完成小图标时Pepsi-Cola图 跟 图标字体会在2个网站存活,自定义图标字体
为何比较耗费时间,且太复杂图标非常小概落到实处?请往下看iconfont开发流程就领悟了。

  第三种革新的法门是运用base64的编码格局。将原始二进制的图片编码为base64,然后使用css的background:
url(data:image/png;base64,%encoding%)的办法,例如百度的首页搜索栏左边的话筒正是用那样的主意:

七喜图不便利变化

Sprite图是一柳盈瑄态的图样,当她转移的那天就注定了他要以什么样的办法显示,因而小编不可能动态地改变她的颜料,无法让他变大(大概会失真),无法像文字一样加贰个阴影效果等等。例如上边包车型大巴菜系,hover大概选中的时候反色:

必发88 13
必发88 14

当选恐怕hover时反色

依然是某一天UI要换颜色、某一天主任挂了,为表哀悼,为个商行的网站要换个油红调。使用百事可乐图时,全体的图标都得重新创造。

行使图标字体能够健全解决地点的难题

二.iconfont开发流程;

接下去便是本文篇幅最大的章节,
笔者将从友好完结图标字体小demo上详细的列出具有手续。

使用免费图标字体:

假定网站采纳的不是自定义的图标字体,而是网上开源的免费图标那完成团长尤其的简易;

【必发88】图标字体,把UI图里的小图标制作成icon。比如,
笔者要采取Alibabaiconfont+
上的图标字体,
进入网站并登陆(能够用github账号登录),从图标库选拔自个儿喜爱的图标:

必发88 15

iconfont+

此处作者选拔了多个小图标,点击右上角购物车,将精选的图标添加到新建项目,然后点选“下载至地面”:

必发88 16

iconfont+_2

下载下来的压缩包就包罗了 三小图标字体文件, 以及两种达成格局的demo;

必发88 17

下载目录

下载图标字体的三种用法,打开对应html(demo_fontclass.html、demo_symbol.html、demo_unicode.html)文件即可精通(也可径直打开我demo里的那多少个公文查看用法,所以用法那里不冗述了);有6个字体文件(EOT/SVG/TTF/WOFF)是为了同盟全体浏览器,因为不相同浏览器对字体格式包容是不均等的:

必发88 18

字体文件包容

选用自定义图标字体:

骨子里开销中挑广陵都以使用自定义生成的图标字体,大概步骤如下:

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

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

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

PS:
教程Sprite图vs图标字体中多了PS导出AI文件的手续,经实践PS生成的AI文件打开不难显示空白,且AI软件可一直打开PSD文件,该手续可省略.

事实上生成自定义图标字体一般交给设计部同事完毕(大概设计同事是用Sketch而不是PS生成小图标),
因为要精晓任何流程细节,所以请教了设计部同事生成自定义图标字体的技术跟措施;
那里就享受下生成自定义图标字体的切实可行流程:

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

必发88 19

PS

PS下载地址:mac
版、windows版

必发88 20

AI

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

前瞻demo效能: 四个小图标:笑脸、黑脸、帽子;
默许展现笑脸+帽子,鼠标hover,变成黑脸+帽子(颜色变绿);

快要完成的小demo将有多少个小图标, 接下来就利用PS生成那两个小图标;

不论是用Sketch仍旧Photoshop绘制小图标的笔触都大概,使用种种基本图形相加相减获得想要的小图标;所以太复杂的图片实现起来会耗时竟是手足无措得以实现。(PS矢量小图标制作、Sketch小图标制作技巧)

笑脸PSD:

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

必发88 21

圆形装

持续用 “圆角矩形工具”绘制小图标的肉眼(为了直观可改成普鲁士蓝):

必发88 22

添加眼睛

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

必发88 23

统一形状

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

必发88 24

形象嘴巴

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

必发88 25

笑脸完毕

黑脸PSD:

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

必发88 26

黑脸

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

必发88 27

双椭圆

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

必发88 28

罪名生成

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

变化五个小图标的PSD后,大家采用AI软件打开八个公文,
然后分别处理生成SVG文件:

必发88 29

存储为SVG

必发88 30

svg

3)访问Alibabaiconfont+(或iconMoon)上传SVG生成字体文件;

将上述手续生成的SVG文件在阿里Babaiconfont+中上传,然后那多少个小图标就在“作者上传的icon”中:

必发88 31

上传

必发88 32

拖拽文件

必发88 33

提交

必发88 34

我的icon

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

必发88 35

累加入库

必发88 36

加盟项目

必发88 37

准备下载

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

必发88 38

小demo

小demo演示地址;

必发88 39

图标字体icon font

图标字体就是将图标作成一个字体,使用时与日常字体无差异,可以设置字号大小、颜色、光滑度等等,方便变化,最大优点是负有字体的矢量无失真特点,同时能够匹配到IE
6。还有2个独到之处是生成的公文尤其小,21陆个图标的扭转的ttf字体文件才41KB

必发88 40

二个图标字体里面的要素

三.iconfont实践注意事项.

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

必发88 41

变动图标注意点

截图来自Alibabaiconfont+;

更加多生成图标字体注意点,请阅读参考资料中《Pepsi-Cola图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在线工具;

必发88 42

在线工具.png

在线工具须求源文件不能超出100K,要是文件过大能够设想地点构件工具;
2.用到webpack、gulp等部件工具在本地将字体文件转成base64样式;
本demo使用 gulp
base64贯彻转移:

必发88 43

gulp base64配置

PS: 本demo的“base64”指令 配置的有个别粗糙, 假如在生育中会考虑 接受参数
以及 自动将扭转的体制统一到 内定样式文件等,大家能够查看 gulp
base64官网精通更详细的施用方法。

参考资料:

细谈CSS@font
face;

浅谈图标字体;

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

Sketch
绘制小图标技巧;

七喜图vs图标字体;

PS矢量小图标设计;

本文对应源码:

github源码地址;

demo演示地址;

  将图纸展开编码,能够动用在线工具base64
image,举行转换。转换之后,你会意识变化的编码尤其长,其字节数甚至比原来的照片大,差不离大33%。以地点的迈克风为例,原始照片为1.3kb,而base64的编码需求1.7kb。同时,其它2个题材是对base64的剖析速度比原始二进制的要慢。更要紧的3个标题是,如若应用太多的base64,会使得css文件太大,下载和剖析的日子较长,导致页面长时间的空白loading状态,效果兴许还不如分开使用一张张图纸。它的独到之处是不供给借用额外的图形文件,详细的分析能够看那篇文章。

哪些制作图标字体

急需准备PS和AI,打开UI图,选中图标的图层,常常它是设计师画的三个模样:

必发88 44
必发88 45

  1. 当选图标的图层

接下来实施:文件->导出->Illustrator,如下左图所示,将生成3个AI文件。用AI打开刚刚生成的公文,执行File->Scripts->SaveDocsAsSVG,如下右图所示,将生成1个SVG文件:

必发88 46必发88 47

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

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

必发88 48

  1. 上传到icomoon

最终身成字体并下载:

必发88 49

  1. 变化两种标准的字体

选拔的时候经过@font-face引入,遵照图标的编码就能够在页面中运用了。

唯独在事实上的操作中并从未像上边说的那么顺利,会境遇不少阻挠,小编也是寻觅了很久才总计了一套实用的阅历,那也是此外介绍图标字体的科目没有提及到的,看其余众多科目恐怕会在骨子里行使中相遇不少坑。

  第一种方法是利用CSS的技能,那种办法一般只适用于比较不难的美术,例如三角形、五角星、爱心等。例如,假若想要画二个腾飞的三角能够选拔下边包车型客车措施:

坑1:图标字体只协助单路径

日常状态下,设计师在炮制图标的时候是用八个途径组合出来的,在上头的导出的svg也是带有八个路子的,打开svg文件就能够知道,它是由多少个path组成的:

必发88 50

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

然则字体只协助单路径,
3个消除办法是手办修改svg文件,把四个path合并成2个,那就须求对svg格式比较熟识。不过那种办法吃力不讨好,只适用比较简单的情状,复杂的图标最终合并的效劳很难完毕和原先的一模一样。

有三个相比较智能的主意,就是应用PS的集合形状组件的机能:

必发88 51

应用PS合并形状组件

如此那般子生成的svg正是单路径的,有时候会遇见“合并形状组件”的菜单项是置灰的,只要把图层的小眼睛点掉再打开就能够了(大概可能自身正是单路径的)。

.tri{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
}

必发88 ,坑2:有个别图标是八个图层组成的

一开头不知晓,所以相比较笨的法子是个别生成多少个svg之后,再去手动去联合svg。其实PS有一个联结形状的成效,选中多少个形状后,右键“合并形状”:

必发88 52

使用PS合并多少个形状图层

  它的规律是将叁个div的width和height设置成0,那就剩下四个border,四个角都以三角形,令其余四个角不突显,只留下底部这么些角,正是叁个腾飞的三角。要专注设置左右角的宽度,指标是设置三角形上边两条边的长度,再将它们隐藏。更加多CSS图形参考css
shape。那种方法看似完美,因为不论空间占据依旧解析速度都比前边三个法子好,可是那种措施是不自然的,你不能任意地改变图形的大大小小去适应你的页面,假设你不清楚它画的原理是什么的。第三是力不从心简单地画出一部分相比复杂的图画,例如为了画多个小黄种人,成本了三千多行的CSS代码。其它2个缺陷是,它是三个空的span或许div,对于荧屏阅读者来说是不可知的。

坑3:生成的SVG填充恐怕被置为none

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

必发88 53

生成的svg是fill:none

本条时候供给手动改一下svg文件,把fill:none改成随便3个色值即可,如fill:#000000.

  第种种方法是选用icon
font,将ui图里的icon导出制作成二个字体库,然后跟健康的书体一样采纳,具体制作的艺术可参考那篇小说。一般的话,icon
font是从svg等矢量格式来的,通过PS导出png的点子只怕会设有部分题材。boostrap的glyphicon就算使用icon
font。使用时,先用@font-face导入字体(font-face的利用见那篇小说),然后使用二个span,设置font-family为刚刚导入的书体,再通过伪类before或after,属性content的值为对应图标的编码。可能是,间接在html文件里直接插入该图标的编码。如下所示:

行使三个本子自动导出svg

在上边的操作中,都是要先实施PS导出再到AI里面实践导出,其实有1个剧本,能够自行执行那两步:PSD
to
SVG, 援助PS
CS6,不支持CC,仍可以把这几个剧本设置一个急迅格局,用起来越发便宜。使用那一个本子须要小心的是图层的命名无法带普通话,不然会出错,所以常常把图层复制到一个新的文件之中进行操作。

必发88 54

选择PSD to SVG扩展有利于

今天主要说下,图标字体的利用和一些注意事项

必发88 55

图标字体的施用

由此font-face导入自定义字体,可以参见字体下载后的demo。然后,把装有应用图标字体的span/a标签都加二个.icon的类,.icon类设置font-family为font-face定义的书体名

JavaScript

@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”: }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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实体:

必发88 56

图标字体的三种接纳方法

其间,e9d3是日前图标在这么些字体里面包车型地铁十六进制编码。在一般字体里,0的编码是0x16,即48,为0的ascii编码。

在使用进度中遭逢的坑:

  使用那种情势的优点是相当的大程序上缩小了图片供给的空间,能够随心所欲转移大小,改变颜色,协助IE6及以上。缺点是只适用于纯色的图标。手提式有线电话机天猫商城和百度就应用了那种技能

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

如下,读者可找下分别:

必发88 57

左边的图标边缘多了二个像素,左侧是正规的

那几个题材在距离比较小的时候就会比较显明,例如上海教室第①个图标中间。化解文案是加一个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;
}

必发88 58
   

2. 瞩目缓存

持续加了新的图标字体,尽管不做拍卖的话,已经加载过的浏览器恐怕会有缓存,导致新的图标字体不会另行下载,所以须要处理这几个题材。最简便的就是在上头的@font-face导入的url里面添加一个版本号的参数:

JavaScript

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

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

抑或更干净的:改变文件名、路径名。

     
icon-font的制作方法可参见博主的别的一篇文章:把UI图里小图标制成icon
font

3. 四人搭档

icomoon免费版的数码是储存在浏览器的本土数据库的,
商业版交点钱能够把数据放在云端,从而完结两个人搭档。免费版也得以完毕三个人合营,方法是将旁人生成的字体svg导进去再添加,生成新的svg字体,同样外人要再上传的时候先上传那些svg。商业版使用的时候要求留意几个人同时操作的情况,有可能会同时生成相同的编码。Ali也提供了二个在线的图标字体制作网站:

  还有一种格局是运用Unicode字符,Unicode也提供了许多的图标和神情,例如打勾,✔
✓ ☑,使用起来最佳简练,可惜的是,不一致的书体差距相当的大,有个别字体没有那些标记,甚至是同二个字体在不一致的配备上看起来也会有差别,例如✔在安卓机上的形象这是样的(中间的勾)必发88 59,而在ios上是这么的必发88 60,同样都是接纳了微软雅黑字体。

图标字体的欠缺

图标字体有3个分明的瑕疵,不援救多色图标。因为它是一个字体,决定了它不得不是单色的。若是实再是要选择多色的图标,甚至带一些特殊效果的那就选择SVG吧。

  下面提及的各类措施都存在二个缺点,没有语义性,都以1个空的span和div,对荧屏阅读者不可知。本文介绍一种新的画小图标的章程,使用svg结合css3的新属性clip-path。那种格局的助益是享有语义性,无论在性质依然占用的空中都具备优势。clip就是裁剪的意趣,clip-path原本的用途是用来剪裁图片,如:

组合使用SVG

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

 必发88 61

左手的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:

必发88 62

借助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,就好像Pepsi-Cola图那样:

  1. 合并SVG

一般来说所示:通过3个个的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
评论

必发88 63

必发88 64

  上边,钦点裁剪的路径为三个椭圆,x轴上的半径为裁剪区域的四分之二,y轴的半径为裁剪区域的十分四,圆心在(1/2,
二分之一)的职位。在那个星型的查封区域外的富有因素都不会被浏览器渲染出来,使用时要包罗-webkit-前缀和正规的两种情势。Clippy本条网站能够在线裁剪,当前流行版本的chrome和safari都扶助中心造型的剪裁。除了椭圆外还补助rect(纺锤形)、cirle(圆形)、inset(带圆角的长方形)、polygon(多边形),具体应用可组合方面的博客和网站进行探索。最后一种情势,是利用html里定义的svg成分作为裁剪的靶子,那相当于clip-path的生命力所在。因为svg自个儿提供了足够的语义定义,能够营造丰硕多彩的矢量图形,更关键的是svg可进行可视化编辑,如AI,inkscape,还有一些在线的编辑器,如svg-editor。关于svg的主旨介绍,可参看mdn的教程。

  除了裁图片,利用clip-path的剪裁功用,能够用来创立图标。原理正是用3个div,设置background颜色和width/height值,然后创造2个图标的svg路径,用来裁剪div,就会来得出相应的小图标了。以打勾的图标为例必发88 65

  首先,制作贰个打勾的svg:必发88 66

<svg width="0" height="0">
    <defs>
        <clipPath id="tick-mask" clipPathUnits="objectBoundingBox">
            <path fill="red" stroke="red" stroke-width="1" stroke-miterlimit="10" d="m0.1165671,0.4703638l0.0852069,-0.0852042l0.2337128,0.2335306l0.389592,-0.3894064l0.0852045,0.0852087l-0.4747964,0.4747913z" id="svg_8" clip-rule='evenodd'/>
        </clipPath>
    </defs>
</svg>

  注意这里,不是选拔基本造型,而是使用了svg里的path,贝塞尔曲线,也正是PS/AI里面包车型客车钢笔工具,在d里面定义路径是如何运动和弯曲的。绘出的形状要放在clipPath标签里,给这几个clipPath添加2个id,在上边包车型地铁CSS里将会动用到,同时设置clipPathUnits为objectBoundingBox,成效是将单位设置成比例[0,1],那样就足以适配出不一样尺寸的形态。clipPathUnits有多少个取值,其余3个取值是userSpaceOnUse,是默许值,一般单位为px。

  形状画好了之后,由于需求背景是新民主主义革命的,勾是普鲁士蓝的,因而先用3个div,设置青色背景和圆角,再用3个白底的span裁出3个勾的形制。如下:

<div class="icon">

</div>

.icon{
    width: 100px;
    height: 100px;
    background: #ff7443;
    text-align: center;
    background: #ff7443;
    border-radius: 100px;
}

.tick{
    display: inline-block;
    -webkit-clip-path: url(#tick-mask);
    clip-path: url(#tick-mask);  /* 在这里对白底的span进行剪切 */
    width: 90%;
    height: 90%;
    background: white;
    margin-top: 5%;
}

  那样就足以了。这篇文章笔者作了贰个圆形菜单,还有结合css3的动画,作了一部分很风趣的动态效果。

  关于包容性,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)加大渲染权重,那样就能彰显出来了。还有大概会油然则生其它相当的小概渲染的意况,例如,同1个id的clip-path只可以渲染出第②个,接下去的都没有了,也得以用那种措施消除,可是假使渲染过重,在chrome等别的浏览器会产出展现的难题,会呈现错乱。因而那几个题材比较麻烦,h5开发的时候要求小心。

  对于无法支撑的浏览器,改用任何的不二法门,得做个区分。可以借鉴modernizr提供的法门,页面加载时,首先创建3个svg和二个div,设置那么些div的clip-path
CSS属性,然后调用getComputedStyle看是还是不是仍有刚刚安装的品质,假使有认证援救,没有表达不扶助。若是协助就给body添加三个has-clip-path的类,不帮助就为no-clip-path,然后在需求采用图标的成分的css前面加多叁个clip-path的类,有和没有多个。那样就直达了分别的指标,不帮助的就利用其余的主意。

<body>
    <svg style="display:none" width="0" height="0"><defs><clipPath id="_svg"><path d="M 0 0 L 0 0"></path></clipPath></defs></svg>
    <div style="-webkit-clip-path:url(#_svg);clip-path:(#_svg);display:none" id="_test"></div>
    <script>
        var style = document.defaultView.getComputedStyle(document.getElementById("_test"), null);
        var body = document.getElementsByTagName("body")[0];
        if(style.WebkitClipPath !== "url(#_svg)" && style.clipPath !== "url(#_svg")
            body.className = "no-clip-path";
        else
            body.className = "has-clip-path";
    </script>
   <!--body的其它元素-->
</body>

  本来能够运用svg和clip-path做为h5开发,可是考虑到安卓上的一点国内浏览器不扶助,以及safari令人高烧的渲染难点,所以就现阶段的处境来说应用到生育环境仍不太乐观。所以在PC的web端使用sprites图,在移动的h5端使用icon
font并灵活结合别的措施。

  注意到,icon-font和clip-path本质都是一律的,都以使用了svg,只是利用的点子各异。由此在提供icon
font图标的网站上,如icomoon和fontello上,可将图标的svg制作字体,也可看做clip-path使用。

 

参考:

1. CSS vs. SVG: Shapes and Arbitrarily-Shaped UI
Components 那篇小说相比较了利用CSS和svg画图标的几种办法,强调了选用svg画图的长处。

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

3. icomoon和fontello,提供icon-font/svg小图标的网站。

4. Clippy在线操作clip-path

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图