iconfont实践小结,图标字体应用实践

By admin in 4858美高梅 on 2019年1月25日

图标字体 VS 七喜图——图标字体采纳实践

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. 下载一个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

4858美高梅 1

       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图将几个小图标弄成一张大图,或者…

4858美高梅 2

FontAwesome经历了两年的前行,近年来已变成广大工具性应用开发者的首选。但FontAwesome的图标毕竟有限,在好几特定的风貌中,FontAwesome的字体并不可以规范地传达合适的意思。为团结的Web
App定制icon-font字体在一些时候就变成了一种要求。

雪碧图

Coca Cola图实例:天猫商城PC端

4858美高梅 3

将多张小图放至一张大图

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

4858美高梅 4

Coca Cola图的行使方法

利用百事可乐图唯一的亮点,可以说就是削减浏览器的伸手次数。因为浏览器同一时间可以加载的资源数是早晚的,IE
8是6个,Chrome是6个,Firefox是8个。为了表明,写了以下html结构:(那部份即使有些跑题,可是很要需求探索一下)

4858美高梅 5

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

下一场在Chrome的开发者工具里面的提姆(Tim)eline可以看来Chrome确实是6个6个加载的,每趟最多加载6个:

4858美高梅 6

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

七喜图的制作方法能够用node的一个的包css-sprite,格外地便民。只要将图标做好,放到相应的公文夹里面,写好布局文件运行,就可以转移对应的图样和css,无需自己手动去调整地点等css属性。详见css-sprite

不过,使用7-Up图存在不可防止的短处

title

因为想为公司的出品定制一套icon-font,把曾经这几个不易改变不易调校大小颜色的图片改成图标字体,经过查找和试用,发现icon-font大致有四类制作方法。这四类措施的图标生成规律是一致的,

七喜图的缺点

之前写了一篇有关百事可乐图的博文,
评论里有说用http2、或用SVG也有说用图标字体代替,大家知识面是挺广,但深切摸底技术点的就像却不多,否则不会有百事可乐图过时无用,用http2或图标字体取代就好了的想法;http2接轨有时光再写一篇个人执行、了解博文,
本文首要讲图标字体(iconfont)技术点,从推行开发角度讲述个人对图标字体的理解。

首要步骤:

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

上图来自Filament Group

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

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

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

高清屏会失真

在2x的设施像素比的显示器上例如mac,借使要达标和文字一样的清晰度,图片的宽窄要求实际突显大小的两倍,否则看起来会相比较模糊:读者可以对照左侧文字和左边图片里文字的清晰度

4858美高梅 7

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

专程是现在手机绝大部份是高清屏了,例如iphone 6 plus的分辨率高达了1920 *
1080,所以为了高清屏,使用7-Up图可能要准备多种准绳的图样。

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

诚如我们项目决定要利用一个技术点前,会查相关资料对其有大致的敞亮。例如,
本次要使用iconfont完毕效益,
明白相关资料后综合、总计出它的优、缺点以及它的选取境况。

图标字体优、缺点:

1.优点;

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

2.缺点;

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

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

4858美高梅 8

@font-face兼容

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

除此以外,图标只好单色调那几个题材也有措施解决,阿里巴巴iconfont+
也是图标字体开发时生成字体文件及demo的网站;阿里巴巴(Alibaba)iconfont+
生成的demo可以缓解图标单色调问题,其规律是 生成svg合集,
然后使用svg突显图标。但该方式包容性较差(SVG包容小结),
如是移动端支出不考虑低版本浏览器包容问题可以品尝该方法。

基于上述图标字体的优缺点, 个人总计的使用情状如下:

1.web app(H5) 小图标 放大失真问题一举成功;

举手投足页面半数以上场合不能用七喜图,用了Sprite图表示图片大小固定了,而移动端需求般配分裂屏幕大小的活动装备,那就需求图片是可以依据显示屏尺寸而更改的。
如若您的图尺寸是稳定的,那就可以用7-Up图。

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

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

PC端做换肤业务时,使用了字体图标完成起来更为的古雅、方便。(以前做页面换皮肤作用时发现换肤时小图标得多出一套Sprite图略麻烦,
假诺是字体图标直接更新颜色样式就OK)

乐乎、斗鱼、Bilibili那类网站不少地点使用了百事可乐图,借使大家保安这类网站,能用图标字体替换么?

从两上边考虑:

1.开销时间资产问题,
使用自定义图标字体替换百事可乐图须求一定时间,倘诺必要高速翻新小图标提议维持用7-Up图;

2.字体小图标包容、单调色问题,
即便网站要求十分低版本浏览器、且图标复杂、或者多色这仍旧得用百事可乐图。

4858美高梅 9

B站

4858美高梅 10

知乎

4858美高梅 11

斗鱼

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

1. 速成系 :一步到位

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

icomoon的icon-font生成器界面

IcoMoon和Fontello都支持间接拖拽svg格式的图标到网页上传图标,即时在线预览差异字号的图标字体效果,批量编辑图标的CSS class名称和Unicode编码,以及下载为总体web字体及CSS文件,可谓至极便宜。

如若下载之后察觉其间某个图标的名号或编码要求修改,而icon-font生成器已经被关门,若是你须求编制的图标不当先10个,那么恭喜您,你如故有时机在几分钟内形成图标字体的转变。但是只要急需修改的图标太多,那么那种免费的在线编辑器恐怕会化为你的梦魇。

同理可得,免费的在线图标编辑器只适合小批量飞速的图标编辑,图标的质地取决于你在svg文件设计时的质量。

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

速成系方法适合不善于设计,想要连忙取得定制图标库的开发者。

7-Up图不便民变化

百事可乐图是一张静态的图纸,当他转移的那天就决定了她要以什么样的点子展现,由此我无法动态地改变他的水彩,不能让她变大(可能会失真),不可能像文字一样加一个黑影效果等等。例如上面的食谱,hover或者选中的时候反色:

4858美高梅 12
4858美高梅 13

当选或者hover时反色

依旧是某一天UI要换颜色、某一天主任挂了,为表哀悼,为个铺面的网站要换个藏黑色调。使用7-Up图时,所有的图标都得重复制作。

选拔图标字体可以圆满解决地点的题材

二.iconfont开发流程;

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

行使免费图标字体:

比方网站使用的不是自定义的图标字体,而是网上开源的免费图标那已毕中校特其他简要;

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

4858美高梅 14

iconfont+

那边我采用了三个小图标,点击右上角购物车,将采纳的图标添加到新建项目,然后点选“下载至地面”:

4858美高梅 15

iconfont+_2

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

4858美高梅 16

下载目录

下载图标字体的三种用法,打开对应html(demo_fontclass.html、demo_symbol.html、demo_unicode.html)文件即可精晓(也可径直打开我demo里的那五个公文查看用法,所以用法那里不冗述了);有4个字体文件(EOT/SVG/TTF/WOFF)是为着合营所有浏览器,因为分裂浏览器对字体格式包容是不同的:

4858美高梅 17

字体文件包容

动用自定义图标字体:

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

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

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

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

PS:
教程百事可乐图vs图标字体中多了PS导出AI文件的手续,经实践PS生成的AI文件打开简单展现空白,且AI软件可一直打开PSD文件,该手续可省略.

骨子里生成自定义图标字体一般交给设计部同事完毕(可能设计同事是用Sketch而不是PS生成小图标),
因为要询问整个工艺流程细节,所以请教了设计部同事生成自定义图标字体的技艺跟艺术;
那里就享受下生成自定义图标字体的具体流程:

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

4858美高梅 18

PS

PS下载地址:mac
版、windows版

4858美高梅 19

AI

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

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

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

无论是用Sketch依然Photoshop绘制小图标的思路都大概,使用种种基本图形相加相减得到想要的小图标;所以太复杂的图样已毕起来会耗时依然不可能已毕。(PS矢量小图标制作、Sketch小图标制作技艺)

笑脸PSD:

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

4858美高梅 20

圆形装

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

4858美高梅 21

拉长眼睛

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

4858美高梅 22

统一形状

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

4858美高梅 23

形状嘴巴

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

4858美高梅 24

笑脸完毕

黑脸PSD:

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

4858美高梅 25

黑脸

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

4858美高梅 26

双椭圆

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

4858美高梅 27

罪名生成

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

变动七个小图标的PSD后,大家接纳AI软件打开多个文件,
然后分别处理生成SVG文件:

4858美高梅 28

存储为SVG

4858美高梅 29

svg

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

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

4858美高梅 30

上传

4858美高梅 31

拖拽文件

4858美高梅 32

提交

4858美高梅 33

我的icon

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

4858美高梅 34

增加入库

4858美高梅 35

插足项目

4858美高梅 36

预备下载

字体文件下载好后, 就能自在完毕自身的小demo:

4858美高梅 37

小demo

小demo演示地址;

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

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

尊贵系,顾名思义,要求开支不少银两才足以得到正版使用权。

中间的Adobe Illustrator不用多说,是矢量图形设计利器。自Adobe推出CC按月付费以来,设计师对于Adobe软件的支出便成了无底洞。尽管Affinity Designer, Sketch等重重辅助矢量图形编辑的软件纷纭推出满足四回性付费的图样编辑器市场的要求。可是究竟那个新利用或多或少还有一部分Bug,稳定性长期内难及Illustrator。当然,倘若你对别的矢量图形编辑软件有信念,在这一步把Adobe Illustrator替换成其他你心仪的图标编辑软件,甚至平昔运用接下去介绍的Glyphs制作亦可。

Glyphs

Glyphs是一套专业级的字形编辑器,完整版的价钱约人民币2000元,支持直接在Glyphs里成立矢量字形。Glyphs Mini比较Glyphs首要保留了SVG导入,字体命名及字体文件导出的效益,价格约为完整版的相当之一。

整个价格不菲,倘诺您已是Illustrator的重度使用者,提出合营Glyphs使用。可视化的剧目适合专业的字体设计师,及不愁经费的私房及团队。相比较接下去要介绍的开源系,Glyphs相信在字体编辑导出的频率上会大大提升。

FontLab 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的书体生成器会更加切合英文字体的变化和排版效果预览。

FOnt Squirrel Web Generator截图

借使您想高度定制导出的WebFont 基特(Kit)的文件类型,可以接纳Expert进行更多设置

图标字体icon font

图标字体就是将图标作成一个字体,使用时与普通字体无异,可以安装字号大小、颜色、透明度等等,方便变化,最大亮点是有所字体的矢量无失真特点,同时可以匹配到IE
6。还有一个独到之处是转变的文书越发小,215个图标的浮动的ttf字体文件才41KB

4858美高梅 38

一个图标字体里面的元素

三.iconfont实践注意事项.

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

4858美高梅 39

扭转图标注意点

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

4858美高梅 40

在线工具.png

在线工具须求源文件不能超出100K,假使文件过大能够考虑当地构件工具;
2.运用webpack、gulp等构件工具在本土将字体文件转成base64样式;
本demo使用 gulp
base64贯彻转移:

4858美高梅 41

gulp base64配置

PS: 本demo的“base64”指令 配置的有些粗糙, 若是在生产中会考虑 接受参数
以及 自动将转移的体制统一到 指定样式文件等,我们可以查阅 gulp
base64官网通晓更详细的接纳方法。

参考资料:

细谈CSS@font
face;

浅谈图标字体;

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

Sketch
绘制小图标技巧;

Sprite图vs图标字体;

PS矢量小图标设计;

本文对应源码:

github源码地址;

demo演示地址;

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。但它到底是开源的软件,并且在二〇一四年中再一次开始了开发与立异。

如何创造图标字体

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

4858美高梅 42
4858美高梅 43

  1. 当选图标的图层

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

4858美高梅 444858美高梅 45

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

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

4858美高梅 46

  1. 上传到icomoon

终极生成字体并下载:

4858美高梅 47

  1. 变更三种口径的书体

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

只是在事实上的操作中并从未像上面说的那么顺遂,会赶上不少挡住,作者也是寻觅了很久才统计了一套实用的阅历,那也是其他介绍图标字体的科目没有提及到的,看其余众多科目可能会在事实上行使中相见不少坑。

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

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

Font 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在变更文书的模版设定上还亟需下一番功夫,才能让变化的公文版本、名称和协会八面见光。

坑1:图标字体只帮忙单路径

普普通通状态下,设计师在创设图标的时候是用三个途径组合出来的,在上头的导出的svg也是含有四个途径的,打开svg文件就可以知晓,它是由多少个path组成的:

4858美高梅 48

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

不过字体只支持单路径,
一个解决办法是手办修改svg文件,把多少个path合并成一个,那就必要对svg格式相比熟知。但是这种办法吃力不讨好,只适用相比较简单的气象,复杂的图标最后合并的功效很难完毕和原来的一模一样。

有一个相比较智能的不二法门,就是利用PS的集合形状组件的效果:

4858美高梅 49

选用PS合并形状组件

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

小结

上述四大类的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只是用来网站图片体现的法门之一,不见得适用于拥有品种,更加是根据马克eting的微型项目,有时直接利用svg或png图片作用更高。

迎接有趣味的爱侣参与座谈。

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

一初叶不精晓,所以比较笨的措施是个别生成多少个svg之后,再去手动去联合svg。其实PS有一个联合形状的效应,选中七个模样后,右键“合并形状”:

4858美高梅 50

动用PS合并八个造型图层

参考资料

A Designer’s Guide to Grumpicon

Markup-free icon fonts using unicode-range

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

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

偶尔会赶上生成了svg,然而上传上去是空的,检查一下svg文件发现是fill被置为none了,如下所示:

4858美高梅 51

生成的svg是fill:none

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

行使一个本子自动导出svg

在上边的操作中,都是要先实施PS导出再到AI里面实践导出,其实有一个剧本,可以自行执行那两步:PSD
to
SVG, 帮助PS
CS6,不支持CC,仍可以把那些剧本设置一个飞快格局,用起来越发有益。使用这一个剧本要求小心的是图层的命名不可以带中文,不然会出错,所以普通把图层复制到一个新的文件之中进行操作。

4858美高梅 52

拔取PSD to SVG增添有利于

当今首要说下,图标字体的利用和一部分注意事项

图标字体的施用

由此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实体:

4858美高梅 53

图标字体的三种采用方式

内部,e9d3是时下图标在那么些字体里面的十六进制编码。在平凡字体里,0的编码是0x16,即48,为0的ascii编码。

在动用进程中相见的坑:

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

一般来说,读者可找下分别:

4858美高梅 54

右侧的图标边缘多了一个像素,左侧是健康的

其一题目在间隔比较小的时候就会相比分明,例如上图第三个图标中间。解决文案是加一个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;
}

2. 瞩目缓存

连续加了新的图标字体,若是不做处理的话,已经加载过的浏览器可能会有缓存,导致新的图标字体不会再次下载,所以须求处理那几个题目。最简便易行的就是在地点的@font-face导入的url里面添加一个本子号的参数:

JavaScript

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

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

仍然更彻底的:改变文件名、路径名。

3. 四个人搭档

icomoon免费版的数额是储存在浏览器的地点数据库的,
商业版交点钱可以把多少放在云端,从而完毕六个人搭档。免费版也足以兑现五人合作,方法是将旁人生成的书体svg导进去再添加,生成新的svg字体,同样旁人要再上传的时候先上传这么些svg。商业版使用的时候须要留意多个人同时操作的事态,有可能会同时生成相同的编码。阿里也提供了一个在线的图标字体制作网站:

图标字体的症结

图标字体有一个明确的后天不足,不辅助多色图标。因为它是一个字体,决定了它不得不是单色的。借使实再是要动用多色的图标,甚至带一些特殊效果的那就选用SVG吧。

4858美高梅 ,重组使用SVG

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

 4858美高梅 55

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

4858美高梅 56

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

4858美高梅 57

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有