快捷搜索:

图标字体应用实践

2019-09-11 21:42 来源:未知

Logo字体 VS 七喜图——Logo字体选用施行

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

初稿出处: 人人网FED博客   

本文介绍使用Logo字体和SVG代替百事可乐图的措施。Sprite图是过多网站日常应用的一种技艺,但是它有顽固的病痛:高清屏会模糊、不能动态变化如hover时候反色。而使用Logo字体能够周到消除上述难点,同不日常候全体包容性好,生成的文本小等优点。

雪碧图

百事可乐图实例:天猫商城PC端

www.8463.com 1

将多张小图放至一张大图

利用的时候,通过background-position调解展现的职责,如下图所示:

www.8463.com 2

七喜图的选取格局

动用百事可乐图独一的长处,能够说正是缩减浏览器的乞求次数。因为浏览器同时能够加载的能源数是早晚的,IE 8是6个,Chrome是6个,Firefox是8个。为了求证,写了以下html结构:(这部份就算有个别跑题,不过很要必要追究一下)

www.8463.com 3

验证Chrome同不时候加载个数的html–相当多张一点都不小的图样

然后在Chrome的开垦者工具里面的Timeline能够看出Chrome确实是6个6个加载的,每一回最多加载6个:

www.8463.com 4

Chrome相同的时候最多加载财富数为6个

Pepsi-Cola图的制作方法能够用node的贰个的包css-sprite,十二分地惠及。只要将Logo做好,放到相应的公文夹里面,写好布局文件运行,就可见生成对应的图片和css,不供给自身手动去调节职责等css属性。详见css-sprite

而是,使用7-Up图存在不可幸免的宿疾

百事可乐图的后天不足

高清屏会失真

在2x的装置像素比的显示器上比方mac,假若要抵达和文字同样的清晰度,图片的肥瘦必要实际呈现大小的两倍,否则看起来会相比模糊:读者能够比较左边文字和左臂图片里文字的清晰度

www.8463.com 5

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

特意是前日手提式有线电电话机绝大部份是高清屏了,举个例子iphone 6 plus的分辨率到达了1917 * 1080,所认为了高清屏,使用7-Up图可能要居安思危各样标准化的图形。

Coca Cola图不便利变化

7-Up图是一杨晓培态的图形,当他转移的那天就已然了她要以什么样的不二诀要体现,因而作者不能够动态地改换她的颜料,不能够让他变大(只怕会失真),无法像文字一样加叁个黑影效果等等。举个例子上边包车型大巴菜谱,hover或然选中的时候反色:

www.8463.com 6
www.8463.com 7

入选只怕hover时反色

大概是某一天UI要换颜色、某一天CEO挂了,为表哀悼,为个铺面的网址要换个墨蓝调。使用七喜图时,所有的Logo都得重复制作。

动用Logo字体可以圆满消除地点的主题材料

Logo字体icon font

Logo字体正是将Logo作成多少个字体,使用时与一般字体无差别,能够安装字号大小、颜色、折射率等等,方便变化,最大优点是具备字体的矢量无失真特点,同期能够同盟到IE 6。还应该有贰个亮点是变化的文书非常小,216个Logo的变动的ttf字体文件才41KB

www.8463.com 8

二个Logo字体里面包车型大巴元素

怎样营造Logo字体

急需预备PS和AI,打开UI图,选中Logo的图层,平常它是设计员画的一个形象:

www.8463.com 9
www.8463.com 10

  1. 入选Logo的图层

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

www.8463.com 11www.8463.com 12

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

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

www.8463.com 13

  1. 上传到icomoon

最一生成字体并下载:

www.8463.com 14

  1. 变化三种规格的书体

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

不过在其实的操作中并不曾像上面说的那么顺遂,会越过海重机厂重拦住,小编也是搜索了相当久才总计了一套实用的阅历,那也是其他介绍Logo字体的科目未有聊起到的,看其余众多课程大概会在实际上采取中相遇相当多坑。

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

一般说来情形下,设计员在制作Logo的时候是用四个路子组合出来的,在上头的导出的svg也是包罗多少个门路的,展开svg文件就足以知晓,它是由几个path组成的:

www.8463.com 15

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

而是字体只协助单路线, 三个化解办法是手办修改svg文件,把多少个path合併成一个,那就要求对svg格式比较熟知。可是这种办法吃力不讨好,只适用比较简单的事态,复杂的Logo最终合併的意义很难成功和原本的如出一辙。

有贰个相比智能的秘技,正是使用PS的集结形状组件的功力:

www.8463.com 16

选择PS合併形状组件

这么子生成的svg正是单路径的,一时候会越过“合併形状组件”的菜单项是置灰的,只要把图层的小眼睛点掉再展开就足以了(大概大概本人正是单路线的)。

坑2:某些Logo是多少个图层组成的

一初始不精晓,所以相比笨的法子是独家生成多少个svg之后,再去手动去联合svg。其实PS有三个联结形状的功能,选中多个形状后,右键“合併形状”:

www.8463.com 17

运用PS合併四个样子图层

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

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

www.8463.com 18

生成的svg是fill:none

以此时候要求手动改一下svg文件,把fill:none改成随意一个色值就能够,如fill:#000000.

接纳二个剧本自动导出svg

在下边包车型客车操作中,都以要先举行PS导出再到AI里面实践导出,其实有三个剧本,可以活动执行这两步:PSD to SVG, 援助PS CS6,不辅助CC,还是能够把这些剧本设置二个快速格局,用起来特别便于。使用这么些本子须求细心的是图层的命名不可能带汉语,不然会出错,所以普通把图层复制到贰个新的文件之中进行操作。

www.8463.com 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":
}

最终,各样图标使用它在相应的编码恐怕HTML实体:

www.8463.com 20

Logo字体的二种选取方法

当中,e9d3是前段时间Logo在那些字体里面包车型客车十六进制编码。在日常字体里,0的编码是0x16,即48,为0的ascii编码。

在运用进程中境遇的坑:

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

如下,读者可找下分别:

www.8463.com 21

左臂的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字体,借使不做拍卖的话,已经加载过的浏览器恐怕会有缓存,导致新的Logo字体不会另行下载,所以必要管理这么些主题材料。最轻松易行的正是在上头的@font-face导入的url里面增加一个本子号的参数:

JavaScript

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

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

要么更干净的:改变文件名、路线名。

www.8463.com,3. 多少人搭档

icomoon免费版的数据是积累在浏览器的本地数据库的, 商业版交点钱能够把多少放在云端,进而达成多少人搭档。免费版也得以完成多个人合作,方法是将别人生成的字体svg导进去再增加,生成新的svg字体,一样旁人要再上传的时候先上传这么些svg。商业版使用的时候须求潜心几人同期操作的动静,有望会同一时候生成一样的编码。Ali也提供了一个在线的Logo字体制作网站:

Logo字体的瑕玷

Logo字体有叁个明明的后天不足,不支持多色Logo。因为它是八个字体,决定了它不得不是单色的。借使实再是要使用多色的Logo,以至带一些特殊效果的那就应用SVG吧。

组合使用SVG

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

 www.8463.com 22

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

www.8463.com 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,就好像Pepsi-Cola图那样:

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

www.8463.com 24

TAG标签:
版权声明:本文由永利皇宫登录网址发布于www.8463.com,转载请注明出处:图标字体应用实践