我是一个前端程序员，我有一个梦想，我希望我的网页在不同的显示器上表现一致，我很任性，我不喜欢用什么雪碧图去设置position来放小图标。我喜欢设计，我每次都会在高清图和分辨率之间拉扯。但是，孔子曾经说过
不会设计的前端不是好小伙，不学习新东西的男人不是小能手
而我总是以各种小能手自居，所以我就希望我活在一个矢量的网页世界里，这里没有毛边，一切都是那么的清晰，这里没有雪碧，所有的图标放置都是那么简单，都是那么容易。于是，我搜索整个互联网，终于为寻求矢量网页的我交出了一份满意的答卷。
设计要求
我很讨厌复杂的东西，现在的web都朝着简洁易用的方向前进，都朝着内容为王前进，所以首先我希望咱们的网站设计至少是简洁易行的。这是咱们实现网站矢量化的基础。
工具们
俗话说得好，工欲善其事必先利其器，我们的网站矢量化需要一些工具支持
- Icomoon
- Adobe Illustor
- Font Spider
挨个说明一下各个工具的用途
Icomoon
官网地址: https://icomoon.io/
这是个什么工具？
再多的语言也没法表达我对这个网站的喜爱。这是一个简单、简洁的线上字体生成工具IcoMoon App
主页没什么好多做介绍的，是一些IcoMoon表属性的文字。
需要注意的是他的主页实际上就是一个很好的Demo，整个网页的所有小图标都是一个个的
span标签，分别对应上不同的Class就出现了不同的图标
实际上这些图标都是基于@font-face实现的，这个不太清楚的可以自行谷歌，自从CSS3支持自定义字体之后国外的网页设计师都如释重负，他们终于可以天马行空地使用各种自己喜欢的字体进行网页设计，再也不需要用那些早就过时的系统默认字体
至于为什么强调国外的设计师解放了，后边会讲到原因。
现在我们一起看他的IconMoon App：
首先我们观察到整个功能区实际上如图所示被分成了三个部分：
- 头部
- 主体
- 底部
你会认为这样的安排千篇一律，但是也正是这样我认为他的易用性超乎寻常。功能区如图：
主功能区注解
实际上这个工具的使用很简单，咱们分几步走就OK
- 引入图片字体库
- 点亮自己需要的字体
- 切换到
Generate Fonts选项卡 - 点击
Download
引入其他字体库
你会发现很快一个Icomoon的zip压缩包就被下载下来了，里面有这么几个文件
Icomoon.zip
┗ demo.html
┗ demo-files
┗ domo.css
┗ demo.js
┗ style.css
┗ fonts
┗ icomoon.woff
┗ icomoon.ttf
┗ icomoon.svg
┗ icomoon.eot
┗ seclection.json
┗ README.txt
-
demo.html 是
演示网页,他是个响应式网站，其源码中对我们有用处的部分就是style.css这么一个外链，里面是所有自定义字体的声明和类。 - fonts文件夹 里面放置了四个字体格式，可以完全兼容所有主流浏览器。
-
selection.json 这是一个数据文件，里面放置的是本次下载所有图标字体和他的名称对应的键值对,今后如果你需要在现有字体基础上增加新字体就完全不需要再“从头找起”，直接
Import Icons选择这个json文件就可以直接将现有的字体文件选中，大大节约时间。
然后，我们怎样将图标字体应用到生产环境呢？
- 将fonts文件夹和style.css移动到你项目的style 文件夹下
- 在页面的
head标签插入link引入style.css - 在页面里插入一个字体图标，可以使用这种方式:
code:
<div>
<span>
<i class="icon-security"></i>
<span class="icon-security></span>
</span>
</div>
实际上我推荐你将style.css重命名为fonticon.css，更便于理解，并且注意，style.css和fonts文件夹的相对位置。至于如何知道哪一个图标对应的class，demo.html会有内容，他们的名字有一定的语义(比如icon-security)就是一个代表"安全"的盾牌。他们都是以
icon-开头
实际上，这个下载包的ttf字体是可以安装到系统的，我们可以在设计原型的时候去挑选字体图标，这样更便于设计的实现，并且很省时间。
这时就会出现问题：
如果我需要的一个图标，Icomoon很不争气地没有，或者说需要购买，那我们怎么办呢？
这是就需要我们强大的矢量编辑器Adobe Illustrator粉墨登场。当然这个实现的前提就是伟大的Icomoon支持导入svg文件生成字体，这大大增加了他的实用性的定制性。
下面我就以一个很简单的例子演示，至于有多简单。
- 首先，在AI新建一个文件，取名logo.svg(icomoon字体里不会有你公司的logo吧).
- 这方面设计绘图，交给美工来施展，我随意一划，不知道哪个公司的logo
- 选中全部路径，点击“编组”。
- 保存文件，打开IcoMoon App
- 点击
Import Icons在文件选择对话框里选择咱们刚才的logo.svg - 载入完成之后在主区域就会有一个“”的分组，所有的自定义都在这里
- 点亮选中，生成字体
使用AI创建图形并编组路径
引入SVG文件后的分组地点
需要注意，这个文件的命名最好是有语义的，因为下载下来的Icomoon字体包这个图标对应的class默认是
icon-文件名,类似于 Untitle/Unknown/asd/qazws 之类的没有语义的命名不要用。（自定义的比较少还可以到class中辨认或者修改，多了怎么办？）
各类属性设置
不常用属性设置
而AI的使用，有这么几个注意点
- 最后路径必须闭合，如果不闭合那生成的就不是一个字体，而是若干个路径，使用相当不便捷，类似：
<span class="icon-plan">
<span class="icon-plan1"></span>
<span class="icon-plan2"></span>
<span class="icon-plan3"></span>
</span>- 文件可以有颜色，描边填充都是可以的，但是这样使用范围较窄，不建议用在公用性质的图标上。
这样，我们使用IconMoon工具和AI就完成了所有网站小图标的矢量化，使用便捷简单，大小颜色更换随心所欲，HTTP请求一次，比雪碧图划算多了。
但是有人提问了：
如果我希望网站的标题是一个比较特殊的字体（比如菱心字体或者是书法字体）怎么办？
这个很简单。直接放到图片里嘛 ~或者你直接用字体不就OK？！
这个当然是开玩笑，放图片确实靠谱但是别忘了咱们的目的是“网页矢量化”，所以直接引入字体就OK了，和之前的一样@font-face定义然后用font-family使用就OK
但是实际上，很少有哪个网站为了一个文章的标题引入一个中文字体。因为中华文化博大精深，但凡一个覆盖常用文字的字体就动辄十几M几十M，为了小小一个字体牺牲了网页的浏览速度，得不偿失。
这个问题目前得到了解决，就是咱们接下来的主角字蛛
Font-Spider
官网地址: http://font-spider.org/
这是腾讯ISUX团队的作品。向大神们致敬。
正如官网所言，Font Spider是一个“中文字体压缩工具”，他的工作原理是遍历引用自定义字体的节点找出已经使用的文字，然后将这些文字对应的字体拆分出来。不同的引用字体最终会被合并成跨浏览器的最终字体
安装前提：NodeJS
windows 下还需要perl
然后执行命令：
npm install font-spider -g
生产完成后，终端运行：
$ font-spider ./demo/*.html
用到的所有字体都会自动打包成woff/svg/eot/ttf格式，兼容性良好，之前的源字体会被备份。
如此一来，目前所有的中文标题、文本字体、网站各种小图标、大图标都可以实现矢量化，甚至有些符号你可以把字号放大颜色放浅作为背景，从而实现网站的矢量化。这样一来的优点:
- 不存在兼容性问题
- 小图标的放置、更改、动画都更加得心应手
- 完美适配 Retina 屏幕
- 加快网页加载速度
结语：
网站矢量化是大势所趋，你可以查看一下淘宝天猫等很多的高级网站现在都已经使用字体图标来进行页面安排，它使得生产更加简单便捷，用CSS3做交互动画简直完美。
相关链接：
以下内容更新于2015/2/22
实际上，我有了另外一个考量。
是不是可以在AI中写出标题之后导出为svg，然后再通过IcoMoon转换成字体的一部分，那不也是另外一个解决方案吗？这两个方案我不太清楚性能优劣性，但是从难易角度来说相比现在这种更省事，因为
- 不需要跑页面，实际上页面并不一定处于同一文件夹，Font-Spider还是有使用不当
- 特殊字体基本应用较少，但是可能是多个字体，选择也是问题
- 一次性的解决方案
- 可以对文字进行相对随意简单的变形设计
我在ai里用造字工房劲黑字体写了几个字，稍微加了一个修饰性的三角号，进行字体导入之后结果出乎我的意料
AI 中的现实效果
IcoMoon 导入效果
肉眼可见的是我的文字们都挂掉了，可见的只有这个孤零零的小三角。发生了啥？
实际上这和我在AI中的疑问相同:字体输入之后我并没有找到文字的锚，没办法直接修改文字，也就是说此时的文字并不是路径。
所以现在我们需要解决的问题是将文字转化成路径。怎样解决呢？
用钢笔描！
简直不能更心酸。这样做完全没有生产力可言。
当然我也呼吁所有的VI设计和Web设计们把比较特殊的文件给出矢量路径，可以为后期的网页制作铺垫，哪怕不用矢量，这种形式的原型也是有优势的。
解决方案其实很简单。确保目前是“钢笔工具”，菜单栏有“文字”菜单，点击之后选择创建轮廓（Mac快捷键Command+shift+o）
使用字体工具转换成轮廓
如此操作之后我们就可以通过操作锚点来进行文字变形了，最后别忘了编组输出svg
转换后更改锚点位置修改
IcoMoon 导入效果
也就是说这条路目前是完全可行的，但是我有一些考虑：
实际上这样子出来的文字和平时网站引入的字体已经不处在同一个字号维度了，普通的定宽页面解决方案这样是OK，可是如果做响应式以后应该怎么做？字号的变换比例究竟怎样做？以后是要研究一下的。
网友评论