Illustrator简单制作字体图标教程
更新时间：2016年9月14日 23:46 点击：1772
今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说简单制作字体图标的教程，各位想知道具体制作方法的使用者，那么下面就快来跟着小编一起看一看教程吧。
给各位Illustrator软件的使用者们来详细的解析分享一下简单制作字体图标的教程。
教程分享：
基本思路：一、制作图标 → 二、生成图标字体 → 三、用CSS把字体引入网站。
工具：
1、Adobe Illustrator，版本不限，需要能将文件存为SVG格式即可(其他能制作SVG格式的软件应该也可以，我没试过);
2、压缩工具，支持ZIP格式(基本上是个压缩工具都支持)。
另外确保电脑能上网。
方法：
1、在AI中新建文档，宽高均为512像素，如下图(不要问我为啥是512px，我也不知道，我试了几次后算出来的，只有这个尺寸和网页里的字号是对的上的);
2、在文档中画图标，用钢笔还是图形工具随意，但要注意颜色为黑色，背景为空，也不能有渐变，半透明啥的。如下图(原则上图形的描点要尽可能少，同时尽量在一个路径里完成整个图标，四边根据设计情况选择是否留空，保证所有图标在视觉上大小的均衡，以及风格的统一);
3、画完后保存，保存时要选择SVG格式，这是重点，如下图。SVG选项默认的就好(我的默认的是1.1版本)，另外命名和图标要匹配，用英文，懒的话用拼音，至少保证自己认得哪个是哪个。多个单词用“-”代替空格(svg文件可以在浏览器里打开查看哦);
SVG文件在谷歌浏览器中查看的效果
4、重复以上步骤，把需要的图标都画出来保存成SVG文件，并放在同一个文件夹里，给文件夹命好名，如下图。
这里只做三个做示例。实际做时建议两个或两个以上。只有一个的话是不生成CSS和html文件的。
5、将此文件夹压缩为zip文件。
6、访问地址：http://iconvau.lt/app(稍有些慢，还请耐心等待。这个网站很厉害，直接把后两大步包办了)，进入后会看到如下界面，将zip文件拖入到红框范围中(也可点击红框范围，选择zip文件)，耐心等待文件上传并转换，别关浏览器。字体转换完成后会自动下载一个名为iconvault.zip的文件，没有自动下载可以点网站中出现的链接进行下载(压缩包放在附件里供大家参考)。
7、解压iconvault.zip文件，能看以下文件(可以开启后缀名查看文件类型)：.fontcustom-data可以删除，eot、svg、ttf、woff这四个是字体文件，分别兼容不同的平台。一个CSS文件，以及一个html文件。用浏览器打开html文件，可以看到你设计的全部图标，以不同的字号排列在里面。
用浏览器打开html文件能看到的内容
对于强迫症来说，这么长的文件名会让人抓狂的，那么打开css文件，在顶端找到几个字体文件的名称，改掉，然后再改掉相应字体文件的名称即可。
网站的引入，html文件是很好的示例，懂点html和CSS的看看就知道了。引入CSS样式后，只要在网页里写这样就行了，和文字一样，赋给相应的样式，就会有相应的效果。
到这里字体图标的制作就算完成了，生成的字体图标较小号时在电脑上浏览会有些许瑕疵，这是因为制作图标时没有考虑小分辨率的情况，就像过于小号的文字显示也会不理想一样，这需要进行精细的适配。但在高PPI的手机屏幕上浏览就没有问题了。当然，更加丰富多彩的图标，目前依旧只能依赖图片。
好了， 以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的简单制作字体图标的教程解析分享的全部内容了，各位看到这里的使用者们，小编相信大家看到这里是非常的清楚了制作方法了吧，那么各位就快去按照小编上面分享的教程自己去尝试着绘制吧。
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14
iPhone6怎么激活？两种苹果iPhone6激活教程图文详解
iPhone6新机需要激活后才可以正常使用，那么对于小白用户来说，iPhone6如何激活使用呢？针对此问题，本文就为大家分别介绍Wifi无线网络激活以及iPhone6连接电脑激活这两种有效的方法，希望本文能够帮助到大家...2022-09-14- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程，各位想知道具体制作方法的使用者们，大家就快来看一看小编给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制帅气卡通魔法王子漫画的具体教程，各位想知道绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给各位Illustrator的这一款软件的使用者们来说说鼠绘堆雪人的孩童矢量插画的教程，各位想知道具体绘制方法的使用者们，那么各位就快来跟着小编来看看...2016-09-14
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下究竟该怎么给照片天空加蓝天白云的教程，各位想知道具体制作步骤的，那么下面就来跟着小编一起看看吧。 ...2016-09-14
- 支付宝支付在国内算是大家了，我们到处都可以使用支付宝了，下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20
- 今天小编在这里就来给llustrator的这一款软件的使用者们来说一说绘制扁平化风格卡通警察护士空姐肖像的教程，各位想知道具体绘制步骤的使用者们，那么下面就快来跟着小编...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程，各位想知道具体绘制方法的使用者们，那么下面就来看一下小编给大家分...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程，各位想知道具体制作方法的使用者们，那么大家就快来看一看教程吧。...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程，各位想知道具体后期处理步骤的使用者们，那么大家就快来跟着小编来看...2016-10-02
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说一下让你胸丰满起来的处理教程，各位想知道具体处理步骤的，那么下面就快来跟着小编一起看一下教程吧。 给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制雷神传插画的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看看绘制方法吧。 ...2016-09-14
- 联合索引又叫复合索引。对于复合索引:Mysql从左到右的使用索引中的字段，一个查询可以只使用索引中的一部份，但只能是最左侧部分。例如索引是key index (a,b,c). 可以支持a | a,b| a,b,c 3种组合进行查找，但不支持 b,c进...2015-11-24
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作隔离区聊天背景的教程，各位想知道具体方法的，那么下面就快来跟着小编一起看一看吧。 给各位美图秀...2016-09-14
- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 这篇文章主要给大家介绍的是关于Lua语言新手入门的简单教程，文中通过示例代码一步步介绍的非常详细，对各位新手们的入门提供了一个很方便的教程，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。...2020-06-30
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说用素材合成古典园林场景教程，各位想知道到底该怎么制作的，那么就快来一起看一下吧。 给各位photoshop...2016-09-14
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- PHP是一种解释型的语言，对于用户而言，我们精心的控制内存意味着easier prototyping和更少的崩溃！当我们深入到内核之后，所有的安全防线都已经被越过，最终还是要依赖于真正有责任心的软件工程师来保证系统的稳定运行。1、线...2015-11-08