字体图标的制作方式

原文:字体图标的制作方式

引言:

如今移动端页面越来越频繁,图标字体的应用也越来越广泛。废话少说,根据自己的实践,今天和大家一起分享两种将图标转换为字体的方法。欢迎大家拍砖!

方法一:SVG+icomoon(目前喜欢并推荐使用)

通常我们会收到一个页面的PSD文件,里面包含一些可以制作成字体的图标。

制作之前请确认您已安装以下软件:

1、  Adobe Photoshop;

2、  Adobe Illustrator;

一、首先生成SVG格式图标:

Step1:复制图标的路径;打开ps选中图层中的路径,然后“Ctrl+C”;

Step2:粘贴路径到Illustrator文档。新建Illustrator 文档,就是“Ctrl+N”,大小建议60x60px,”Ctrl+V”粘贴到该图层;

Step3:为图标填充黑色。在Illustrator中选择右侧 “外观”在“填色”那里选择黑色;

Step4:等比调整图标大小。按住“Shift”键等比调整图标大小,使其适合当前文档大小;

Step5:存储为SVG格式的图标。“Ctrl+ Shift+S”存储为svg格式图标,存储时的选项直接用默认的设置即可,在命名时注意下,会涉及到后面图标样式名称。

Ps:关于Illustrator 文档的设置大小只是建议,因为在ps设计稿中图标的路径大小一般不超过30px,如果是retina屏幕那就不超过60px,设置太大的话等比缩放时会造成小麻烦,所以建议60X60px。

 convert-to-svg1

二、利用icomoon生成字体图标

Step1:浏览器打开icomoon

Step2:导入svg图标。点击左上角的“import icons”按钮,选择您想要制作成字体的svg图标;

Step3:导出字体图标及demo。选中您需要的图标字体,点击页面最下方的“Font”按钮,在download之前还可以进行些个人的配置。点“Preferences”按钮,可以设置你的字体的名字(Font Name)、样式的前缀或后缀、如果需要兼容IE7及以下的浏览器请勾选上,等还有更多不太常用详细的选项。配置后之后,download it!

Step4:拷贝你所需要的资源到自己的项目。解压文件后,里面有一个示例的demo页面,大家可参考里面的写法,然后把所用的fonts和样式拷贝到自己的项目中,大功告成啦!

 svg-to-font1

Icomoon是目前我所知道的最好用的字体图标工具,它包含免费版和收费版本,免费的图标就有1000+款,具体可在它的library里面查看添加或移出;另外它还可以在Chrome web Store中使用。更多强大功能还等你发现哦。

方法二:使用Fontographer制作图标字体

所需安装的软件:

1、Adobe Illustrator

2、Fontographer 5.1

一、使用Illustrator

1、打开矢量图形

2、选择图形复制到剪贴板

如果图形不是矢量图,可以使用PSD打开,将图形导出EPS格式,再用Illustrator打开,转换为矢量格式,本文不详情。

二、使用Fontographer

1、打开Fontographer,菜单”File”->”New”新建字体文件,双击第一个带有两个”**”的格子,打开编辑页面。此时为了方便查看,建议通过”Windows”->”Tile vertically”将字体列表页和编辑页面左右显示在同一屏幕,这样就可以实时看开编辑的效果。

2、将从Illustrator中复制的图形粘贴到编辑页面。调整位置和大小。

 fontographer11

3、将刚制作的字体与相应的字符进行对应。(关键)

关闭编辑页面,回到主界面,选择刚才编辑的格字。

菜单”Element”->”Selection info”,在出现的对话框中填写”Glyph name”(字符)及”Unicode index”(字符编码),点击”ok”,如图:

 fontographer21

tips:

(1)、字符容易记住,编码却不易,此时通过”Unicode index”项右边的Get frome “name”按钮获取字符对应编码。

(2)、特殊的unicode E000-EFFF,在unicode中,E000-EFFF是用户造字区,从标准的意思上来讲,这个区间的unicode码最适合来做图标字体。然后使用css的content来将unicode添到文档中去,如下代码:

.icon-home:before{content:”\e000″;}

但content和before伪类,在IE下兼容情况并不是很好,所以本文还是使用英文字母或符号来造图标字体。

4、在菜单”Element”->”Font info”中设置一下作者、版权、字体名称等相关信息。

5、导出的字体文件

使用“ctrl+alt+g”打开字体导出面板,导出.ttf格式的字体

6、使用在线工具,转换字体格式

使用获得fontsquirrel @font-face所需的.eot,.woff,.ttf,.svg字体格式。

fontsquirrel:http://www.fontsquirrel.com/tools/webfont-generator

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

发表评论

请登录后发表评论: