您的位置:澳门新葡8455最新网站 > Web前端 > 把UI图里的小Logo制作成icon,Logo字体

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

发布时间:2019-11-10 12:27编辑:Web前端浏览(58)

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

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

    原文出处: 人人网FED博客   

    本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊、无法动态变化如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

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

    雪碧图

    雪碧图实例:淘宝PC端

    图片 2

    将多张小图放至一张大图

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

    图片 3

    雪碧图的使用方法

    使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数。因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chrome是6个,Firefox是8个。为了验证,写了以下html结构:(这部份虽然有点跑题,但是很要必要深究一下)

    图片 4

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

    然后在Chrome的开发者工具里面的Timeline可以看到Chrome确实是6个6个加载的,每次最多加载6个:

    图片 5

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

    雪碧图的制作方法可以用node的一个的包css-sprite,十分地方便。只要将图标做好,放到相应的文件夹里面,写好配置文件运行,就能够生成相应的图片和css,无需自己手动去调整位置等css属性。详见css-sprite

    然而,使用雪碧图存在不可避免的缺点

    雪碧图的缺点

    高清屏会失真

    在2x的设备像素比的屏幕上例如mac,如果要达到和文字一样的清晰度,图片的宽度需要实际显示大小的两倍,否则看起来会比较模糊:读者可以对比左边文字和右边图片里文字的清晰度

    图片 6

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

    特别是现在手机绝大部份是高清屏了,例如iphone 6 plus的分辨率达到了1920 * 1080,所以为了高清屏,使用雪碧图可能要准备多种规格的图片。

    雪碧图不方便变化

    雪碧图是一张静态的图片,当他生成的那天就注定了他要以什么样的方式展示,因此我不能动态地改变他的颜色,无法让他变大(可能会失真),无法像文字一样加一个阴影效果等等。例如下面的菜单,hover或者选中的时候反色:

    图片 7
    图片 8

    选中或者hover时反色

    或者是某一天UI要换颜色、某一天老总挂了,为表哀悼,为个公司的网站要换个灰色调。使用雪碧图时,所有的图标都得重新制作。

    使用图标字体可以完美解决上面的问题

    图标字体icon font

    图标字体就是将图标作成一个字体,使用时与普通字体无异,可以设置字号大小、颜色、透明度等等,方便变化,最大优点是拥有字体的矢量无失真特点,同时可以兼容到IE 6。还有一个优点是生成的文件特别小,215个图标的生成的ttf字体文件才41KB

    图片 9

    一个图标字体里面的元素

    如何制作图标字体

    需要准备PS和AI,打开UI图,选中图标的图层,通常它是设计师画的一个形状:

    图片 10
    图片 11

    1. 选中图标的图层

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

    图片 12图片 13

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

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

    图片 14

    1. 上传到icomoon

    最后生成字体并下载:

    图片 15

    1. 生成几种规格的字体

    使用的时候通过@font-face引入,根据图标的编码就可以在页面中使用了。

    然而在实际的操作中并没有像上面说的那么顺利,会遇到很多阻碍,笔者也是摸索了很久才总结了一套实用的经验,这也是其它介绍图标字体的教程没有提及到的,看其它很多教程可能会在实际使用中遇到很多坑。

    坑1:图标字体只支持单路径

    通常情况下,设计师在制作图标的时候是用多个路径组合出来的,在上面的导出的svg也是带有多个路径的,打开svg文件就可以知道,它是由几个path组成的:

    图片 16

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

    但是字体只支持单路径, 一个解决办法是手办修改svg文件,把多个path合并成一个,这就要求对svg格式比较熟悉。但是这种方法吃力不讨好,只适用比较简单的情况,复杂的图标最后合并的效果很难做到和原先的一模一样。

    有一个比较智能的办法,就是使用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增加便利

    现在重点说下,图标字体的使用和一些注意事项

    图标字体的使用

    通过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实体:

    图片 21

    图标字体的两种使用方法

    其中,e9d3是当前图标在这个字体里面的十六进制编码。在普通字体里,0的编码是0x16,即48,为0的ascii编码。

    在使用过程中遇到的坑:

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

    如下,读者可找下区别:

    图片 22

    左边的图标边缘多了一个像素,右边是正常的

    这个问题在间距比较小的时候就会比较明显,例如上图第二个图标中间。解决文案是加一个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吧。

    结合使用SVG

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

     图片 23

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

    图片 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,就像雪碧图那样:

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

    图片 25

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:把UI图里的小Logo制作成icon,Logo字体

    关键词:

上一篇:线条动画入门,新司机开车指南

下一篇:没有了