|
三年前，有一个设计师面试一位 Web 前端工程师，其中有一段这样的对话： “如果设计师希望用图片实现某个字体样式，而从技术的角度来说这样不合理，但设计师非常坚持，这时候你怎么办？” “我会给设计师讲解工程上面临的问题，争取他理解。例如：如果文本使用图片，以腾讯站点的访问量来说，这里会需要消耗大量的服务器资源，至少需要增加 XXX 台服务器，带宽流量消耗 XXX 万”。 这是一段真实的面试场景，而我就是那位被面试者。这些年 Web 前端技术在迅猛的发展，这样的问题已经有了解决方案——WebFont，如果再回到当年面试的场景，我会给出更好的答案。 WebFont 技术可以让网页使用在线字体，而无需使用图片，从而有机会解决开头设计师提到的问题。它通过 CSS 的 一、WebFont 的优势相对图片，WebFont 有如下优势：
二、中文 WebFont 的困境既然 WebFont 有如此多优势，为何中文站点依然很少采用？这里主要是三个“中国特色”造成的： 1、中文字体体积英文只有 26 个字母，一套字体不过几十 KB；而汉字却有数万个，导致字体文件通常有好几 MB 大小，文件体积比英文字体大数百倍，按照中国网络环境的现状，用于实际项目中显然不现实。 2、浏览器类型国内浏览器市场异常繁荣，从 IE6 到各种壳的浏览器，他们对字体格式的支持也不一样，字体格式转换相当繁琐。 3、操作系统相当长的时期内，Windows XP 操作系统是国内的主流，而 XP 系统对字体渲染表现差劲，设计师难以接受 WebFont 的表现，而宁愿使用图片。不过随着 XP 系统市场份额急剧下降以及移动设备的崛起，这个问题已经变得不再那么重要了。 总结一下，中文 WebFont 首要解决的问题便是：压缩与转码。 三、现有的中文 WebFont 解决方案1. 本地制作通过字体制作工具来删除没有使用的字符，即制作精简版字体，这也是我之前实践过的方案。
2. 字体云服务国内目前有两家公司提供中文 WebFont 云托管服务，他们能够压缩与转码字体：
三、现有方案的问题
四、本地自动化 WebFont 压缩设想出于性能以及可控性的考虑，我们排除了第三方云服务方案，尝试设计本地自动化方案。和小伙伴讨论的过程中，我们想到了之前有同事做过自动化切图的工具，原理是用脚本操作 Photoshop，那么我们是否同样可以编写脚本让字体工具自动化的操作呢？理论上 OK，值得我们去尝试。 字体压缩关键在于删除不必要的字符，我们可以指定一个配置文件来指定字体以及其所使用的字符，然后操作字体工具精简字体即可。 前面提到，如果手工配置字体所使用的字符可能会遗漏，这里也能否实现自动化的提取？ 灵感总是在不经意间出现，我们将目光又朝向了 CSS，因为 CSS 本身就一个完整的配置文件：它的 五、字蛛（Font-Spider）诞生为了实现上述设想，我们需要拥有这三个小伙伴：
借助开源的力量，工具的 Demo 版本被迅速的实现出来。感谢以下开源项目：
成果
指定 HTML 文件路径就可以自动化的压缩与转码字体，过程中完全无需人工干预，可以方便的集成在前端发布系统中。 开源不断的完善后，我们将工具命名为——字蛛（Font-Spider），并回馈给开源社区，希望它能够为中文 WebFont 的发展出一份力，让更多的中文站点可以使用精美的字体。套用一句话来结束本文：技术方案会迟到，但从不会缺席。 |
|
|
（图：字体制作工具——FontLab）
