迟到的中文 WebFont

[aui]

三年前，有一个设计师面试一位 Web 前端工程师，其中有一段这样的对话：

“如果设计师希望用图片实现某个字体样式，而从技术的角度来说这样不合理，但设计师非常坚持，这时候你怎么办？”

“我会给设计师讲解工程上面临的问题，争取他理解。例如：如果文本使用图片，以腾讯站点的访问量来说，这里会需要消耗大量的服务器资源，至少需要增加 XXX 台服务器，带宽流量消耗 XXX 万……”。

这是一段真实的面试场景，而我就是那位被面试者。这些年 Web 前端技术在迅猛的发展，这样的问题已经有了解决方案——WebFont，如果再回到当年面试的场景，我想我会给出更好的答案。

WebFont 技术可以让网页使用在线字体，而无需使用图片，从而有机会解决开头设计师提到的问题。它通过 CSS 的 @font-face 语句引入在线字体，使用 CSS 选择器指定运用字体的文本。在国外，WebFont 已经非常流行了，大量的网站使用了 WebFont 技术，而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务，这一切甚至带动了国外字体制作行业的高速发展。

WebFont 的优势

相对图片，WebFont 有如下优势：

1. 支持选中、复制
2. 支持 Ctrl+F 查找
3. 对搜索引擎友好
4. 支持工具翻译
5. 支持无障碍访问，支持朗读
6. 字体是矢量图形，支持矢量缩放，自动适配高清屏
7. 文本修改方便
8. 字形可以重复利用，节省网络资源

中文 WebFont 的困境

既然 WebFont 有如此多优势，为何中文站点依然很少采用？这里主要是三个“中国特色”造成的：

1、中文字体体积

英文只有 26 个字母，一套字体不过几十 KB；而汉字却有数万个，导致字体文件通常有好几 MB 大小，文件体积比英文字体大数百倍，按照中国网络环境的现状，用于实际项目中显然不现实。

2、浏览器类型

国内浏览器市场异常繁荣，从 IE6 到各种壳的浏览器，他们对字体格式的支持也不一样，字体格式转换相当繁琐。

3、操作系统

相当长的时期内，Windows XP 操作系统是国内的主流，而 XP 系统对字体渲染表现差劲，设计师难以接受 WebFont 的表现，而宁愿使用图片。不过随着 XP 系统市场份额急剧下降以及移动设备的崛起，这个问题已经变得不再那么重要了。

总结：中文 WebFont 首要解决的问题是压缩与转码。

三、现有的中文 WebFont 解决方案

1. 本地制作

通过字体制作工具来删除没有使用的字符，即制作精简版字体，这也是我之前实践过的方案。

（图：字体制作工具——FontLab）

2. 字体云服务

国内目前有两家公司提供中文 WebFont 云托管服务，他们能够压缩与转码字体：

• http://www.youziku.com（有字库）
• http://cn.justfont.com（就是字）

现有方案的问题

1. 在实践中，通过工具制作精简版字体异常繁琐，它需要仔细核对字符，修改非常麻烦，效率低下且容易遗漏字符而导致出错
2. 第三方云服务最大的问题是无法保证稳定性，能否支撑海量用户访问还是个问号，至少目前这两家中文 WebFont 平台中还没有大型商业站点的案例，大多都是一些小型个人或企业网站在使用

本地自动化 WebFont 压缩设想

出于性能以及可控性的考虑，我们排除了第三方云服务方案，尝试设计本地自动化方案。和小伙伴讨论的过程中，我们想到了之前有同事做过自动化切图的工具，原理是用脚本操作 Photoshop，那么我们是否同样可以编写脚本让字体工具自动化的操作呢？理论上 OK，值得我们去尝试。

字体压缩关键在于删除不必要的字符，我们可以指定一个配置文件来指定字体以及其所使用的字符，然后操作字体工具精简字体即可。

前面提到，如果手工配置字体所使用的字符可能会有遗漏的风险，并且每次页面修改都需要同步修改配置文件，这里能否实现自动化配置？

灵感总是在不经意间出现，我们将目光又朝向了 CSS，因为 CSS 本身就一个完整的配置文件：它的 @font-face 语句记录着字体名称与文件路径，选择器记录着字体使用范围，而 CSS 选择器又与 HTML 文档相对应，HTML 文档又可以使用选择器来查找节点与文本。

字蛛（Font-Spider）诞生

为了实现上述设想，我们需要拥有这三个小伙伴：

1. 分析模块：负责收集字体与字体使用的字符
2. 压缩模块：负责删除字体中没有使用的字符实现压缩
3. 转码模块：负责将字体转换成跨浏览器使用的格式

借助开源的力量，工具被迅速的实现出来，非常感谢以下开源项目的帮助：

• css.js：它能将 CSS 解析成语法树，并且能够较好的容错适应各种 hack 语法
• jsdom：它能够在 NodeJS 中实现 W3C DOM API，使得我可以使用 document.querySelectorAll() 方法输入 CSS 选择器来查找 HTML 节点上的文本
• font-optimizer：这是一个使用 Perl 编写的字体优化工具
• ttf2eot、ttf2woff、ttf2svg：是它们完成了跨浏览器字体格式转码的工作

成果

指定 HTML 文件路径就可以自动化的压缩与转码字体，过程中完全无需人工干预，可以方便的集成在前端发布系统中。

开源

不断的完善后，我们将工具命名为——字蛛（Font-Spider），并回馈给开源社区，希望它能够为中文 WebFont 的发展出一份力，让更多的中文站点可以使用精美的字体。套用一句话结束本文：技术会迟到，但从不会缺席。

• 字蛛官网：http://font-spider.org
• 项目贡献者：@糖饼 @fufu @kdd

[yisibl]

沙发。

非常好的工具。

[malei0311]

赞

[wayou]

赞！
如果我没理解错的话，有个问题，处理后的字符集仅限于页面上出现过的，对于动态添加的字符则无法应用上正确的字体。
比如js插入的内容，页面输入元素输入的内容，从别处加载的内容等。
所以似乎此工具更适合内容固定的博客门户等，是这样么？

[yibhou]

动态的应该不行的，因为用户输入的文字没办法预处理，不过非常棒了，做一些产品发布页可以派上场，加油继续

[yolio2003]

感谢糖饼哥分享。貌似还需要针对 矢量格式【设计师】 > .ttf 的过程 简化，不过已经不是正常的字体范畴了。

[aui]

几乎所有的制作工具都支持从 AI 中复制字形，然后导出 .ttf

[qianduan]

赞

[iqingting]

@font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

.ttf 确实是生成并且备份了，但其余格式并没有生成，不知是怎么回事？

[aui]

@rguanghui 建议给予有助于解决问题再新的 issues，比如 css 文件、html 文件，你的情况很可能是没有分析到 webfont，可以检查下 css 的语法。

[ifabre]

执行"npm install font-spider -g"后报错，信息如下：
npm ERR! Darwin 14.0.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "font-spider" "-g"
npm ERR! node v0.12.0
npm ERR! npm v2.5.1
npm ERR! path /usr/local/lib/node_modules/font-spider
npm ERR! code EACCES
npm ERR! errno -13

npm ERR! Error: EACCES, unlink '/usr/local/lib/node_modules/font-spider'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES, unlink '/usr/local/lib/node_modules/font-spider']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! path: '/usr/local/lib/node_modules/font-spider' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! error rolling back Error: EACCES, unlink '/usr/local/lib/node_modules/font-spider'
npm ERR! error rolling back at Error (native)
npm ERR! error rolling back { [Error: EACCES, unlink '/usr/local/lib/node_modules/font-spider']
npm ERR! error rolling back errno: -13,
npm ERR! error rolling back code: 'EACCES',
npm ERR! error rolling back path: '/usr/local/lib/node_modules/font-spider' }
系统环境：OS X 10.10.1 请教该如何解决？

[aui]

Mac需要管理员权限安装全局模块。

sudo npm install name -g

另外，请不要在无关的问题回复，可以另外新建问题，谢谢