www.qjdy.com-奇迹赌场 > 佳美特设计 > 图标字体 VS 雪碧图——图标字体应用实践

原标题:图标字体 VS 雪碧图——图标字体应用实践

浏览次数:166 时间:2019-11-22

Logo字体 VS Pepsi-Cola图——Logo字体选拔奉行

2017/04/05 · HTML5 · 1 评论 · Logo字体

初藳出处: 人人网FED博客   

正文介绍使用Logo字体和SVG代替雪碧图的措施。Pepsi-Cola图是累累网址常常使用的后生可畏种技艺,可是它有短处:高清屏会模糊、无法动态变化如hover时候反色。而使用Logo字体能够周密消除上述难点,同期具备宽容性好,生成的公文小等优点。

雪碧图

7-Up图实例:天猫商城PC端

图片 1

将多张小图放至一张大图

行使的时候,通过background-position调治呈现的职务,如下图所示:

图片 2

Coca Cola图的行使办法

动用Pepsi-Cola图唯后生可畏的帮助和益处,能够说就是裁减浏览器的央求次数。因为浏览器同一时间能够加载的资源数是不可否认的,IE 8是6个,Chrome是6个,Firefox是8个。为了证实,写了以下html结构:(这部份就算有些跑题,不过很要供给商量一下)

图片 3

验证Chrome同时加载个数的html–相当多张比极大的图形

下一场在Chrome的开采者工具里面包车型地铁提姆eline能够见到Chrome确实是6个6个加载的,每一遍最多加载6个:

图片 4

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

7-Up图的制作方法可以用node的叁个的包css-sprite,拾壹分地惠及。只要将Logo做好,放到相应的文本夹里面,写好安插文件运转,就能够转移对应的图样和css,不要求和煦手动去调动地方等css属性。详见css-sprite

但是,使用百事可乐图存在不可制止的老毛病

Coca Cola图的劣势

高清屏会失真

在2x的装置像素比的显示屏上举例mac,若是要到达和文字同样的清晰度,图片的宽度要求实际展现大小的两倍,否则看起来会相比模糊:读者能够相比较侧边文字和左边图片里文字的清晰度

图片 5

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

专程是前几日手提式有线电电话机绝大部份是高清屏了,比如iphone 6 plus的分辨率高达了1918 * 1080,所感觉了高清屏,使用Pepsi-Cola图恐怕要筹算两种准则的图样。

七喜图不方便人民群众变化

百事可乐图是一高璇态的图纸,当他转移的那天就决定了他要以什么样的法子体现,由此笔者无法动态地改动他的水彩,不能让她变大(恐怕会失真),无法像文字相同加贰个黑影效果等等。比如上边包车型地铁美食做法,hover或许选中的时候反色:

图片 6
图片 7

当选恐怕hover时反色

照旧是某一天UI要换颜色、某一天CEO挂了,为表哀悼,为个商铺的网址要换个墨玉绿调。使用7-Up图时,全部的Logo都得重新创设。

行使Logo字体可以圆满解决地方的主题素材

Logo字体icon font

Logo字体便是将Logo作成三个字体,使用时与普通字体一点差别也未有,能够设置字号大小、颜色、折射率等等,方便变化,最大优点是独具字体的矢量无失真特点,同一时候能够协作到IE 6。还应该有叁个亮点是生成的文件相当的小,214个Logo的转换的ttf字体文件才41KB

图片 8

三个Logo字体里面包车型客车要素

怎么制作Logo字体

亟需思量PS和AI,打开UI图,选中Logo的图层,平日它是设计员画的一个造型:

图片 9
图片 10

  1. 入选Logo的图层

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

图片 11图片 12

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

接下去,依靠二个第三方的网址制作Logoicomoon.io,步向app页面,选用导入icon,将刚刚生成的svg上传上去

图片 13

  1. 上传到icomoon

最后生成字体并下载:

图片 14

  1. 变迁两种口径的书体

利用的时候经过@font-face引进,依据Logo的编码就能够在页面中央银行使了。

不过在实质上的操作中并不曾像上面说的那么顺遂,会遇见重重阻挠,作者也是索求了相当久才计算了风流倜傥套实用的经历,那也是别的介绍Logo字体的课程未有提及到的,看别的众多科目恐怕会在实际上利用中碰到重重坑。

坑1:Logo字体只扶持单路线

平常状态下,设计员在成立Logo的时候是用几个门路组合出来的,在地点的导出的svg也是包涵多个路子的,张开svg文件就足以清楚,它是由多少个path组成的:

图片 15

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

唯独字体只帮忙单路线, 三个消灭办法是手办改革svg文件,把多少个path合併成八个,那就要求对svg格式比较纯熟。可是这种办法劳而无功,只适用比较轻便的事态,复杂的Logo最终合并的职能很难完毕和原先的大同小异。

有八个比较智能的点子,就是利用PS的会面形状组件的机能:

图片 16

选用PS合并形状组件

如此子生成的svg就是单路线的,有时候会遇上“合併形状组件”的菜单项是置灰的,只要把图层的小眼睛点掉再展开就足以了(恐怕或然小编便是单路线的卡塔 尔(阿拉伯语:قطر‎。

坑2:有个别Logo是多少个图层组成的

豆蔻梢头开首不知底,所以相比较笨的主意是分别生成多少个svg之后,再去手动去联合svg。其实PS有一个统风流倜傥形状的功用,选中多个形象后,右键“合併形状”:

图片 17

选取PS合并多个模样图层

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

神蹟会遭逢生成了svg,可是上传上去是空的,检查一下svg文件开掘是fill被置为none了,如下所示:

图片 18

生成的svg是fill:none

本条时候须要手动改一下svg文件,把fill:none改成随意一个色值就可以,如fill:#000000.

动用叁个剧本自动导出svg

在地方的操作中,都以要先实施PS导出再到AI里面实行导出,其实有三个剧本,能够自动施行这两步:PSD to SVG, 扶持PS CS6,不辅助CC,还足以把那几个剧本设置三个快速格局,用起来特别有支持。使用这几个剧本需求静心的是图层的命名不能够带粤语,不然会出错,所以平常把图层复制到一个新的公文之中举办操作。

图片 19

应用PSD to SVG扩充有帮忙

现今重中之重说下,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实体:

图片 20

Logo字体的二种选择方法

其间,e9d3是日前Logo在此个字体里面包车型客车十八进制编码。在常常字体里,0的编码是0x16,即48,为0的ascii编码。

在动用进度中相遇的坑:

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

如下,读者可找下分别:

图片 21

左边的图标边缘多了一个像素,侧面是常规的

以此主题素材在间距一点都不大的时候就能够相比鲜明,比方上图第三个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字体,若是不做拍卖的话,已经加载过的浏览器恐怕会有缓存,招致新的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:

 图片 22

侧边的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:

图片 23

借助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,仿佛Sprite图那样:

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

图片 24

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:图标字体 VS 雪碧图——图标字体应用实践

关键词: mg4355娱乐平台 HTML5

上一篇:W3C决定终止HTML的制定工作

下一篇:没有了