把UI图里的小图标制作成iconfont_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了把UI图里的小图标制作成iconfont_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5852字，纯文字阅读大概需要9分钟。
内容图文
一个交互比较多的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
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里面设计师是画了两个圆和一条线，如下面所示：
如果两个圆的fill颜色都设置成一样的灰色的话，那么生成的文件是这样的：
里面那个圆的fill属性的作用导致放大镜中间被填充了，因此需要手动改一下，将两个圆放到同一个path，这样围起来的路径就是一个环：
生成的放大镜就正常了：
还有的图标可能是由多个图层组成的，这个时候需要分别生成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的优势就很明显了。
| 仅支持 Embedded OpenType(.eot) 格式。 |
| 仅支持 Embedded OpenType(.eot) 格式。 |
| 仅支持 Embedded OpenType(.eot) 格式。 |
| 支持 TrueType、OpenType(.ttf, .otf) 格式。 |
| 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。 |
| 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。 |
| 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。 |
| 支持 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
内容总结
以上是互联网集市为您收集整理的把UI图里的小图标制作成iconfont_html/css_WEB-ITnose全部内容，希望文章能够帮你解决把UI图里的小图标制作成iconfont_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。