iconfont实践小结,path制作小图标

图标字体 VS Sprite图——图标字体采纳实践

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

原文出处:
人人网FED博客   

本文介绍使用图标字体和SVG取代Sprite图的格局。Sprite图是广大网站平日利用的一种技术,不过它有毛病:高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以健全解决上述问题,同时拥有包容性好,生成的文书小等优点。

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

iconfont实践小结,path制作小图标。     
一个相互相比多的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

美高梅开户网址 1

       9.
接下去,借助icomoon,制作字体。打开icommon(假如打不开,得使用代理因为那网站采纳了谷歌(谷歌(Google))的一部分劳动),点击右上角的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图将多个小图标弄成一张大图,或者…

美高梅开户网址 2

     
一般一个网页上边,或多或少都会用到有的小图标,显示那些小图标的主意有很多种。最简易的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片。但那也是相比笨的艺术,因为浏览器同一时间最多加载的资源是有限的,例如IE7是2个,IE8是6个,chrome是6个,火狐是8个。假诺网页上边有很多张零碎的小图片,导致请求的次数太多,等待加载状态中的资源会不可胜数,明显影响属性。因而,一个更上一层楼的形式是行使sprites图,将多张小图放在一张大图,然后限定呈现区域的深浅,同时改变图片的来得地方background-position来浮现差距的图标,游戏之中平日使用那种技术,大大裁减浏览器请求的次数。天猫商城网就拔取那种技能:

雪碧图

7-Up图实例:TaobaoPC端

美高梅开户网址 3

将多张小图放至一张大图

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

美高梅开户网址 4

七喜图的使用办法

运用百事可乐图唯一的亮点,可以说就是减掉浏览器的伸手次数。因为浏览器同一时间可以加载的资源数是一定的,IE
8是6个,Chrome是6个,Firefox是8个。为了求证,写了以下html结构:(那部份尽管有些跑题,可是很要须求商量一下)

美高梅开户网址 5

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

接下来在Chrome的开发者工具里面的提姆eline可以看出Chrome确实是6个6个加载的,每一回最多加载6个:

美高梅开户网址 6

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

Coca Cola图的制作方法能够用node的一个的包css-sprite,格外地点便。只要将图标做好,放到相应的文书夹里面,写好布局文件运行,就可以生成对应的图纸和css,无需协调手动去调动任务等css属性。详见css-sprite

不过,使用百事可乐图存在不可防止的通病

title

美高梅开户网址 7

七喜图的弱点

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

     
不过要观望那种办法也是有缺点的,即内存和CPU的利用增多,对于活动端低内存和CPU的装备来说,可能会有压力。使用sprites图,网上有过多在线的功具可以生成,同时会生成各样小图标的position地方,例如

高清屏会失真

在2x的装置像素比的屏幕上例如mac,要是要达到和文字一样的清晰度,图片的肥瘦需求实际突显大小的两倍,否则看起来会比较模糊:读者可以对照左边文字和右手图片里文字的清晰度

美高梅开户网址 8

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

越发是当今手机绝大部份是高清屏了,例如iphone 6 plus的分辨率高达了1920 *
1080,所以为了高清屏,使用7-Up图可能要未雨绸缪多种规则的图纸。

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

相似大家项目决定要运用一个技术点前,会查相关资料对其有大概的了然。例如,
本次要使用iconfont完毕效益,
掌握相关材料后综合、统计出它的优、缺点以及它的运用情况。

图标字体优、缺点:

1.优点;

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

2.缺点;

图标只可以单色调(太复杂的多色图标不能完毕)、生成图标字体相对花时间。

跟webfont一样iconfont已毕的根本代码是“@font-face”(细谈CSS@font
face)查看其浏览器包容新闻为IE8+:

美高梅开户网址 9

@font-face兼容

低版本浏览器其实也有主意包容,icoMoon是图标字体开发时生成字体文件及demo的网站,用过icoMoon的同班都知晓其有一个“Support
IE 7”选项, icoMoon IE7帮忙落实原理:样式上用*zoom
触发重绘(触发haslayout), 脚本上检测
关键字className动态插入dom节点落实;考虑到IE7近年来的市场份额,以及该措施带来的习性消耗,本人不提出去包容。

其它,图标只可以单色调那几个题目也有方法化解,阿里巴巴(阿里巴巴)iconfont+
也是图标字体开发时生成字体文件及demo的网站;Alibabaiconfont+
生成的demo可以解决图标单色调问题,其原理是 生成svg合集,
然后选拔svg突显图标。但该方法包容性较差(SVG兼容小结),
如是移动端支付不考虑低版本浏览器兼容问题可以品味该办法。

据悉上述图标字体的利弊, 个人计算的使用情形如下:

1.web app(H5) 小图标 放大失真问题一挥而就;

移步页面超过半数场馆不可以用七喜图,用了七喜图表示图片大小固定了,而运动端须求协作分歧屏幕大小的位移设备,那就须要图片是足以依照显示屏尺寸而改变的。
尽管你的图尺寸是平素的,那就足以用七喜图。

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

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

PC端做换肤业务时,使用了字体图标已毕起来更为的幽雅、方便。(往日做页面换皮肤功用时意识换肤时小图标得多出一套七喜图略麻烦,
如若是字体图标直接更新颜色样式就OK)

和讯、斗鱼、Bilibili那类网站不少地点拔取了Sprite图,假使大家保安这类网站,能用图标字体替换么?

从两地方考虑:

1.费用时间花费问题,
使用自定义图标字体替换Sprite图要求自然时间,如若需求飞速翻新小图标指出维持用Coca Cola图;

2.字体小图标包容、单调色问题,
假诺网站要求卓绝低版本浏览器、且图标复杂、或者多色那依然得用7-Up图。

美高梅开户网址 10

B站

美高梅开户网址 11

知乎

美高梅开户网址 12

斗鱼

故而完成小图标时百事可乐图 跟 图标字体会在一个网站存活,自定义图标字体
为啥相比较耗时,且太复杂图标不能兑现?请往下看iconfont开发流程就询问了。

  第三种创新的格局是利用base64的编码方式。将原始二进制的图样编码为base64,然后利用css的background:
url(data:image/png;base64,%encoding%)的章程,例如百度的首页搜索栏左边的Mike风就是用那样的艺术:

Coca Cola图不便于变化

雪碧图是一张静态的图纸,当她转移的这天就决定了她要以什么样的法门体现,由此我无法动态地改变她的颜色,无法让她变大(可能会失真),不可以像文字一样加一个影子效果等等。例如上边的食谱,hover或者选中的时候反色:

美高梅开户网址 13
美高梅开户网址 14

当选或者hover时反色

仍旧是某一天UI要换颜色、某一天CEO挂了,为表哀悼,为个店家的网站要换个黄色调。使用七喜图时,所有的图标都得重复创制。

运用图标字体可以周密解决地点的题目

二.iconfont开发流程;

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

行使免费图标字体:

如若网站使用的不是自定义的图标字体,而是网上开源的免费图标那达成校官特其余简便;

比如说,
我要动用Alibabaiconfont+
上的图标字体,
进入网站并登陆(可以用github账号登录),从图标库选拔自己喜欢的图标:

美高梅开户网址 15

iconfont+

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

美高梅开户网址 16

iconfont+_2

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

美高梅开户网址 17

下载目录

下载图标字体的两种用法,打开对应html(demo_fontclass.html、demo_symbol.html、demo_unicode.html)文件即可精晓(也可一向打开自己demo里的那多个文件查看用法,所以用法那里不冗述了);有4个字体文件(EOT/SVG/TTF/WOFF)是为着协作所有浏览器,因为不一样浏览器对字体格式包容是分化的:

美高梅开户网址 18

字体文件包容

行使自定义图标字体:

事实上付出中挑顺德都是应用自定义生成的图标字体,大约步骤如下:

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

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

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

PS:
教程7-Up图vs图标字体中多了PS导出AI文件的手续,经实践PS生成的AI文件打开不难展现空白,且AI软件可直接打开PSD文件,该步骤可省略.

骨子里生成自定义图标字体一般交给设计部同事达成(可能设计同事是用Sketch而不是PS生成小图标),
因为要通晓任何工艺流程细节,所以请教了设计部同事生成自定义图标字体的技艺跟艺术;
那里就享受下生成自定义图标字体的切实可行流程:

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

美高梅开户网址 19

PS

PS下载地址:mac
版、windows版

美高梅开户网址 20

AI

AI下载地址:mac
版、windows版
美高梅开户网址,1)使用PS-矩形工具 生成图标;

预测demo功用: 八个小图标:笑脸、黑脸、帽子;
默许突显笑脸+帽子,鼠标hover,变成黑脸+帽子(颜色变绿);

就要已毕的小demo将有三个小图标, 接下来就采取PS生成那四个小图标;

任凭用Sketch仍然Photoshop绘制小图标的思绪都大致,使用各个基本图形相加相减得到想要的小图标;所以太复杂的图样达成起来会耗时居然不可以兑现。(PS矢量小图标制作、Sketch小图标制作技艺)

笑脸PSD:

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

美高梅开户网址 21

圆形装

接轨用 “圆角矩形工具”绘制小图标的眸子(为了直观可改成白色):

美高梅开户网址 22

累加眼睛

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

美高梅开户网址 23

集合形状

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

美高梅开户网址 24

形态嘴巴

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

美高梅开户网址 25

笑脸达成

黑脸PSD:

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

美高梅开户网址 26

黑脸

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

美高梅开户网址 27

双椭圆

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

美高梅开户网址 28

帽子生成

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

变迁八个小图标的PSD后,大家运用AI软件打开多少个文本,
然后各自处理生成SVG文件:

美高梅开户网址 29

存储为SVG

美高梅开户网址 30

svg

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

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

美高梅开户网址 31

上传

美高梅开户网址 32

拖拽文件

美高梅开户网址 33

提交

美高梅开户网址 34

我的icon

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

美高梅开户网址 35

充分入库

美高梅开户网址 36

投入项目

美高梅开户网址 37

准备下载

字体文件下载好后, 就能轻松落成自身的小demo:

美高梅开户网址 38

小demo

小demo演示地址;

美高梅开户网址 39

图标字体icon font

图标字体就是将图标作成一个字体,使用时与普通字体无异,可以安装字号大小、颜色、透明度等等,方便变化,最大亮点是持有字体的矢量无失真特点,同时可以包容到IE
6。还有一个优点是转变的文书更加小,215个图标的变型的ttf字体文件才41KB

美高梅开户网址 40

一个图标字体里面的要素

三.iconfont实践注意事项.

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

美高梅开户网址 41

变动图标注意点

截图来自阿里巴巴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在线工具;

美高梅开户网址 42

在线工具.png

在线工具必要源文件不可能超出100K,即便文件过大可以设想当地构件工具;
2.运用webpack、gulp等构件工具在本土将字体文件转成base64样式;
本demo使用 gulp
base64落到实处转移:

美高梅开户网址 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。同时,其余一个题材是对base64的分析速度比原始二进制的要慢。更严重的一个问题是,如果接纳太多的base64,会使得css文件太大,下载和分析的岁月较长,导致页面短期的空白loading状态,效果说不定还不如分开使用一张张图纸。它的长处是不需要借用额外的图片文件,详细的剖析可以看那篇小说。

什么创造图标字体

内需未雨绸缪PS和AI,打开UI图,选中图标的图层,日常它是设计师画的一个样子:

美高梅开户网址 44
美高梅开户网址 45

  1. 当选图标的图层

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

美高梅开户网址 46美高梅开户网址 47

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

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

美高梅开户网址 48

  1. 上传到icomoon

说到底生成字体并下载:

美高梅开户网址 49

  1. 浮动三种规格的书体

动用的时候经过@font-face引入,根据图标的编码就足以在页面中采用了。

可是在其实的操作中并没有像上面说的那么百步穿杨,会碰着重重阻止,作者也是摸索了很久才总计了一套实用的经历,那也是其它介绍图标字体的学科没有提及到的,看别的众多课程可能会在事实上行使中蒙受很多坑。

  第三种艺术是运用CSS的技巧,那种办法一般只适用于比较简单的美术,例如三角形、五角星、爱心等。例如,如若想要画一个迈入的三角可以应用下边的不二法门:

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

平日境况下,设计师在创设图标的时候是用多个路子组合出来的,在上边的导出的svg也是含有多个途径的,打开svg文件就足以领略,它是由多少个path组成的:

美高梅开户网址 50

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

然则字体只帮助单路径,
一个解决办法是手办修改svg文件,把六个path合并成一个,那就须要对svg格式比较熟谙。不过那种艺术吃力不讨好,只适用比较简单的图景,复杂的图标最终合并的功能很难形成和原先的一模一样。

有一个相比较智能的方法,就是运用PS的碰面形状组件的效应:

美高梅开户网址 51

行使PS合并形状组件

如此子生成的svg就是单路径的,有时候会蒙受“合并形状组件”的菜单项是置灰的,只要把图层的小眼睛点掉再打开就足以了(或者可能我就是单路径的)。

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

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

一开始不了然,所以相比笨的法门是各自生成多少个svg之后,再去手动去联合svg。其实PS有一个统一形状的效益,选中八个形象后,右键“合并形状”:

美高梅开户网址 52

拔取PS合并多个模样图层

  它的法则是将一个div的width和height设置成0,那就剩下多少个border,七个角都是三角形,令其他多个角不显得,只留下尾部那些角,就是一个迈入的三角形。要留心设置左右角的小幅,目标是设置三角形上边两条边的尺寸,再将它们隐藏。越来越多CSS图形参考css
shape。那种办法看似完美,因为不论是空间占据照旧解析速度都比前边七个章程好,可是那种艺术是不自然的,你不可能自由地转移图形的轻重去适应你的页面,如若你不明白它画的规律是怎么着的。第二是力不从心不难地画出一部分相比较复杂的图案,例如为了画七个小黄人,用度了2000多行的CSS代码。其它一个毛病是,它是一个空的span或者div,对于显示屏阅读者来说是不可知的。

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

突发性会蒙受生成了svg,但是上传上去是空的,检查一下svg文件发现是fill被置为none了,如下所示:

美高梅开户网址 53

生成的svg是fill:none

本条时候要求手动改一下svg文件,把fill:none改成随便一个色值即可,如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里面实践导出,其实有一个本子,能够自行执行那两步:PSD
to
SVG, 辅助PS
CS6,不扶助CC,仍能把那几个本子设置一个快速格局,用起来更加便于。使用这一个剧本必要小心的是图层的命名无法带中文,不然会出错,所以经常把图层复制到一个新的文件之中举行操作。

美高梅开户网址 54

接纳PSD to SVG扩大有利于

近期紧要说下,图标字体的行使和有些注意事项

美高梅开户网址 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实体:

美高梅开户网址 56

图标字体的二种选拔方法

中间,e9d3是当前图标在那些字体里面的十六进制编码。在一般字体里,0的编码是0x16,即48,为0的ascii编码。

在利用进程中遇到的坑:

  使用这种方法的优点是很大程序上裁减了图片须要的空间,可以肆意转移大小,改变颜色,援救IE6及以上。缺点是只适用于纯色的图标。手机天猫和百度就使用了那种技能

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

正如,读者可找下分别:

美高梅开户网址 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;
}

美高梅开户网址 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。商业版使用的时候必要注意多人还要操作的情状,有可能会同时生成相同的编码。阿里也提供了一个在线的图标字体制作网站:

  还有一种艺术是使用Unicode字符,Unicode也提供了诸多的图标和神情,例如打勾,✔
✓ ☑,使用起来最好不难,可惜的是,区其余字体差异很大,有些字体没有那些标记,甚至是同一个字体在不一样的设备上看起来也会有距离,例如✔在安卓机上的模样那是样的(中间的勾)美高梅开户网址 59,而在ios上是那样的美高梅开户网址 60,同样都是选用了微软雅黑字体。

图标字体的后天不足

图标字体有一个醒目标缺点,不帮衬多色图标。因为它是一个字体,决定了它只可以是单色的。如果实再是要采纳多色的图标,甚至带一些特殊效果的那就使用SVG吧。

  上边提及的种种方法都留存一个败笔,没有语义性,都是一个空的span和div,对显示屏阅读者不可知。本文介绍一种新的画小图标的点子,使用svg结合css3的新属性clip-path。那种措施的独到之处是兼备语义性,无论在性能依旧占用的长空都兼备优势。clip就是裁剪的情致,clip-path原本的用途是用来剪裁图片,如:

结缘使用SVG

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

 美高梅开户网址 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:

美高梅开户网址 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,如同雪碧图那样:

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

美高梅开户网址 63

美高梅开户网址 64

  上面,指定裁剪的门径为一个椭圆,x轴上的半径为裁剪区域的50%,y轴的半径为裁剪区域的40%,圆心在(50%,
50%)的地方。在那一个椭圆形的查封区域外的所有因素都不会被浏览器渲染出来,使用时要含有-webkit-前缀和专业的二种样式。Clippy本条网站可以在线裁剪,当前最新版本的chrome和safari都支持主题造型的剪裁。除了椭圆外还辅助rect(长方形)、cirle(圆形)、inset(带圆角的长方形)、polygon(多边形),具体采纳可构成方面的博客和网站开展追究。最终一种格局,是行使html里定义的svg元素作为裁剪的对象,那也正是clip-path的活力所在。因为svg本身提供了增进的语义定义,可以创立充分多彩的矢量图形,更主要的是svg可进展可视化编辑,如AI,inkscape,还有一对在线的编辑器,如svg-editor。关于svg的主题介绍,可参看mdn的教程。

  除了裁图片,利用clip-path的剪裁成效,可以用来打造图标。原理就是用一个div,设置background颜色和width/height值,然后创立一个图标的svg路径,用来裁剪div,就会来得出相应的小图标了。以打勾的图标为例美高梅开户网址 65

  首先,制作一个打勾的svg:美高梅开户网址 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添加一个id,在底下的CSS里将会采纳到,同时安装clipPathUnits为objectBoundingBox,成效是将单位设置成比例[0,1],那样就足以适配出分裂大小的模样。clipPathUnits有多个取值,其余一个取值是userSpaceOnUse,是默许值,一般单位为px。

  形状画好了后来,由于须要背景是革命的,勾是白色的,由此先用一个div,设置藏蓝色背景和圆角,再用一个白底的span裁出一个勾的形状。如下:

<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)加大渲染权重,那样就能显得出来了。还有可能相会世此外不可以渲染的图景,例如,同一个id的clip-path只可以渲染出第三个,接下去的都石沉大海了,也得以用那种办法焚林而猎,可是只要渲染过重,在chrome等任何浏览器会冒出展现的题材,会浮现错乱。由此那个题目相比较劳碌,h5开发的时候需求留意。

  对于无法支撑的浏览器,改用其他的章程,得做个分裂。可以借鉴modernizr提供的办法,页面加载时,首先创立一个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地图