迟到的中文 WebFont

(前端工程师福音，收藏一下)

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

“若是设计师但愿用图片实现某个字体样式，而从技术的角度来讲这样不合理，但设计师很是坚持，这时候你怎么办？”

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

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

WebFont 技术可让网页使用在线字体，而无需使用图片，从而有机会解决开头设计师提到的问题。它经过 CSS 的 @font-face 语句引入在线字体，使用 CSS 选择器指定运用字体的文本，与此同时专用于 Web 展现的 woff 格式字体也获得各大浏览器厂商支持，进一步减小了字体的体积。在国外，WebFont 已经很是流行了，大量的网站使用了 WebFont 技术，而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务，这一切均带动了国外字体制做行业的高速发展。

WebFont 的优点

相对图片，WebFont 有以下优点：

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

中文 WebFont 的困境

既然 WebFont 有如此多优点，为什么中文站点依然不多采用？这里主要是三个“中国特点”形成的：

中文字体体积

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

浏览器类型

国内浏览器市场异常繁荣，从 IE6 到各类壳的浏览器，他们对字体格式的支持也不同，字体格式转换至关繁琐。

操做系统

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

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

现有的中文 WebFont 解决方案

本地制做

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

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

字体云服务

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

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

现有方案的问题

在实践中，经过工具制做精简版字体异常繁琐，它须要仔细核对字符，修改很是麻烦，效率低下且容易遗漏字符而致使出错

第三方云服务最大的问题是没法保证稳定性，可否支撑海量用户访问仍是个问号，至少目前这两家中文 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

文章出处 迟到的中文 WebFont