图标字体,把UI图里的小图标制作成icon

时间:2019-11-16 03:19来源:网页制作
Logo字体 VS 百事可乐图——图标字体接纳试行 2017/04/05 · HTML5 · 1评论 ·图标字体 初藳出处:人人网FED博客    本文介绍使用图标字体和SVG替代Sprite图的不二秘籍。Coca Cola图是数不胜数

Logo字体 VS 百事可乐图——图标字体接纳试行

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

初藳出处: 人人网FED博客   

本文介绍使用图标字体和SVG替代Sprite图的不二秘籍。Coca Cola图是数不胜数网址平时利用的生机勃勃种手艺,不过它有欠缺:高清屏会模糊、不可能动态变化如hover时候反色。而使用Logo字体能够周到毁灭上述难点,同期持有包容性好,生成的文本小等优点。

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

      八个人机联作超级多的UI图里面也许会有超多小Logo,日常可用sprites图将四个小Logo弄成一张大图,只怕别的的议程,种种方法的可比可参见博主的其余豆蔻梢头篇博客使用css3新属性clip-path制作小图标,本文深刻座谈使用icon-font的的制作方法:在PS里面导出svg,制作字体Logo。这种方法既有sprites图无需浏览器发多次伸手的独特之处,也会有利用clip-path/svg矢量无损的独特之处,并且援救IE6及以上。

      使用sprites图可以自动用PS将三个小Logo放至一张图:

      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卡塔 尔(英语:State of Qatar)的部分服务),点击右上角的Import Icon开关,导入上边保存的svg文件。

       icomoon就能跳到select页面,选中刚刚导入的Logo:

      再点击右下角的Generate Font:

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

      观看它的使用代码,开采那一个Logo被拆成了6个span表示6个path,还要调度它们的间隔。那不是想要的结果,理想的结果应当是若是贰个span表示这几个Logo就好了。

      依据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提供的汪洋无需付费的Logo和搜索功用,不过利用那几个Logo的缺欠是高低或许是不相似的,以致在UI里面原来相近大小的字体Logo必要设置不一致的的字体大小。而使用UI图制作的svg大小比例就能附近UI图,不要求设置五个font-size。

      需求专一的是,如若以往还要再导入新的Logo,需求在原来的底蕴上助长,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>

      生成的火镜就不奇怪了:

      还会有的Logo大概是由八个图层组成的,那时候须要各自生成svg,然后嵌入一齐,用Inkscape或ai调下相对地点。这里须要点svg的文化,能够参照他事他说加以考察MDN上的svg教程。

      最后再相比下大小,把上边第一张sprites图里面包车型大巴9个小Logo都制作成icon fonts,生成的文件大小为:

      最大的为6.6KB,小的为2.6KB,而地点生成的sprites图为7.1KB,用tinypng压缩后为3.0KB。能够见见,倘使唯有多少个Logo并且图标本身就超级小时,在文件大小上,icon-font比sprites图的优势并不显眼。当Logo增到贰13个,即把地方的Logo再导入一次,现制作的icon-fonts大小为:

      贰13个icon-font的最大svg格式的为13kb,最小的为4.1KB,sprites图为6KB,思量到svg格式的并不太会或许被浏览器下载, 如下图所示。所以在文件大小上,icon-fonts依旧比sprites图有优势的,假诺Logo个数相当的少的话差距非常的小。假若Logo供给出示得极大的话,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的最大亮点是矢量无损,劣点是必须要协助单色的Logo,因为它是二个常备的字体,还应该有在炮制上稍麻烦。

 

参考:

      1. 行使css3新属性clip-path制作小Logo

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

      3. PSD to SVG

 

 

 

font,uiicon 二个相互超多的UI图里面或然会有为数不菲小Logo,常常可用sprites图将五个小Logo弄成一张大图,只怕...

雪碧图

Coca Cola图实例:TaobaoPC端

图片 2

将多张小图放至一张大图

运用的时候,通过background-position调治显示之处,如下图所示:

图片 3

七喜图的使用方法

运用Coca Cola图唯风流倜傥的独到之处,能够说正是压缩浏览器的号召次数。因为浏览器同时能够加载的能源数是无可否认的,IE 8是6个,Chrome是6个,Firefox是8个。为了验证,写了以下html结构:(那部份纵然有一些跑题,可是很要须要斟酌一下)

图片 4

验证Chrome同一时候加载个数的html–超多张十分大的图纸

下一场在Chrome的开拓者工具里面包车型客车Timeline能够见见Chrome确实是6个6个加载的,每便最多加载6个:

图片 5

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

7-Up图的制作方法能够用node的三个的包css-sprite,十一分地方便。只要将Logo做好,放到相应的文书夹里面,写好布局文件运营,就能够生成对应的图纸和css,没有必要协和手动去调动职分等css属性。详见css-sprite

只是,使用Sprite图存在不可幸免的弱项

7-Up图的败笔

高清屏会失真

在2x的装置像素比的显示器上举个例子mac,假设要达成和文字相通的清晰度,图片的上涨的幅度供给实际突显大小的两倍,不然看起来会相比较模糊:读者能够比较左侧文字和侧面图片里文字的清晰度

图片 6

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

专程是前些天手提式有线话机绝大部份是高清屏了,举例iphone 6 plus的分辨率高达了1917 * 1080,所认为了高清屏,使用7-Up图恐怕要预备多种准则的图样。

7-Up图不便利变化

Coca Cola图是一高满堂态的图样,当他转移的那天就已然了她要以什么样的方法突显,因而笔者无法动态地改动他的水彩,不能让她变大(大概会失真),不能够像文字相近加二个投影效果等等。举个例子上边包车型客车菜单,hover可能选中的时候反色:

图片 7
图片 8

入选只怕hover时反色

抑或是某一天UI要换颜色、某一天董事长挂了,为表哀悼,为个杂货店的网址要换个葱青调。使用7-Up图时,全体的Logo都得重复制作。

使用Logo字体能够圆满解决地方的难点

Logo字体icon font

图标字体就是将Logo作成八个字体,使用时与平日字体无差别,能够设置字号大小、颜色、发光度等等,方便变化,最大亮点是有所字体的矢量无失真特点,同临时间能够合营到IE 6。还应该有叁个独到之处是转换的文书特别小,2千克个Logo的生成的ttf字体文件才41KB

图片 9

二个图标字体里面包车型客车要素

如何成立Logo字体

亟待希图PS和AI,张开UI图,选中Logo的图层,平常它是设计员画的多少个模样:

图片 10
图片 11

  1. 当选Logo的图层

然后推行:文件->导出->Illustrator,如下左图所示,将生成叁个AI文件。用AI展开刚刚生成的文本,施行File->Scripts->SaveDocsAsSVG,如下右图所示,将生成三个SVG文件:

图片 12图片 13

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

接下去,依据三个第三方的网址制作Logoicomoon.io,走入app页面,选拔导入icon,将刚刚生成的svg上传上去

图片 14

  1. 上传到icomoon

最后生成字体并下载:

图片 15

  1. 转换三种规范的书体

运用的时候经过@font-face引进,依照Logo的编码就足以在页面中动用了。

可是在实质上的操作中并未像上边说的那么顺遂,会蒙受重重阻碍,小编也是探寻了相当久才计算了风华正茂套实用的资历,那也是其余介绍Logo字体的学科未有谈起到的,看其余众多学科恐怕会在实质上采取中相遇超多坑。

坑1:Logo字体只协助单路线

不足为奇状态下,设计员在创设Logo的时候是用七个门路组合出来的,在上头的导出的svg也是包涵八个门路的,打开svg文件就足以通晓,它是由多少个path组成的:

图片 16

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

而是字体只帮助单路线, 多少个消除办法是手办改过svg文件,把多少个path合併成多少个,那将要求对svg格式比较纯熟。不过这种艺术劳而无功,只适用比较轻便的情事,复杂的Logo最终合併的功用很子宫破裂生和原本的一模一样。

有贰个相比智能的点子,正是利用PS的联合形状组件的作用:

图片 17

利用PS归并形状组件

像这种类型子生成的svg就是单路线的,一时候会遇上“归拢形状组件”的菜单项是置灰的,只要把图层的小眼睛点掉再张开就足以了(只怕恐怕小编就是单路线的)。

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

风流倜傥初叶不掌握,所以比较笨的方法是各自生成多少个svg之后,再去手动去联合svg。其实PS有七个统生龙活虎形状的职能,选中四个形象后,右键“归拢形状”:

图片 18

使用PS合并多少个样子图层

坑3:生成的SVG填充或然被置为none

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

图片 19

生成的svg是fill:none

那个时候供给手动改一下svg文件,把fill:none改成随意三个色值就可以,如fill:#000000.

使用二个剧本自动导出svg

在下面的操作中,都是要先举行PS导出再到AI里面施行导出,其实有二个剧本,能够自行推行这两步:PSD to SVG, 帮忙PS CS6,不援助CC,仍是可以够把这些剧本设置多个快捷格局,用起来极其有益。使用这些剧本须求小心的是图层的命名不可能带粤语,不然会出错,所以普通把图层复制到二个新的文书之中进行操作。

图片 20

运用PSD to SVG扩大有接济

如今任重(英文名:rèn zhòng卡塔尔国而道远说下,Logo字体的使用和部分注意事项

Logo字体的利用

经过font-face导入自定义字体,能够参谋字体下载后的demo。然后,把具备应用Logo字体的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":
}

最终,每个Logo使用它在对应的编码或然HTML实体:

图片 21

Logo字体的三种接收方法

中间,e9d3是当前Logo在此个字体里面包车型地铁十三进制编码。在常常字体里,0的编码是0x16,即48,为0的ascii编码。

在使用进程中相见的坑:

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

日常来讲,读者可找下分别:

图片 22

左边手的Logo边缘多了二个像素,右侧是常规的

那几个主题素材在间距相当的小的时候就能够相比显著,比方上海体育场合第贰个Logo中间。解决文案是加二个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. 瞩目缓存

后续加了新的图标字体,假设不做管理的话,已经加载过的浏览器恐怕会有缓存,导致新的Logo字体不会重复下载,所以供给管理那么些标题。最简便易行的正是在地点的@font-face导入的url里面加多一个版本号的参数:

JavaScript

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

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

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

3. 几人同盟

icomoon免费版的数目是积攒在浏览器的地面数据库的, 商业版交点钱能够把数据放在云端,进而完成四个人同盟。无需付费版也得以兑现三个人搭档,方法是将外人生成的书体svg导进去再增多,生成新的svg字体,相符旁人要再上传的时候先上传那个svg。商业版使用的时候要求专心几人还要操作的场合,有非常大希望会同偶然候生成相仿的编码。Ali也提供了一个在线的Logo字体制作网址:

Logo字体的瑕疵

Logo字体有三个分明的症结,不帮忙多色Logo。因为它是三个字体,决定了它不能不是单色的。假诺实再是要使用多色的Logo,以至带一些特殊效果的这就应用SVG吧。

整合使用SVG

对于多色的Logo,能够在页面插入三个SVG:

 图片 23

左边手的location的Logo正是运用了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:

图片 24

借助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,有如7-Up图那样:

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

到现在,整个流程表明完成~ Logo字体和SVG结合使用,提高网址的高清体验。

1 赞 2 收藏 1 评论

图片 25

编辑:网页制作 本文来源:图标字体,把UI图里的小图标制作成icon

关键词: