中文WebFont的子集化

前言

WebFont技术可以让网页使用在线字体,无需使用图片,减少流量消耗。WebFont已经在国外非常流行,大量知名网站均在使用;业界大佬Google推出的免费WebFont云托管服务,更带动了国外字体制作行业的高速发展。但由于中文的特殊情况,国内在中文webfont上一直进展缓慢。最近关注了下国内WebFont的相关技术,发现这两年国内还是很努力的,中文WebFont的子集化已经基本实现。

为什么要子集化

关于字体,自从HTML诞生开始,前端工程师们进行很多探索:图片,siFR,Cufon,@font-face …

@font-face是个不错的方案,Adobe TypeKit, Google Fonts都在使用这个方案。但是@font-face是老外发明的,所以他们从来没想过中文的情况,中文一套字体一般要3-6M这样的庞然大物嵌入网页上,结果可想而知;此外还有浏览器、操作系统等问题影响。结果时至今日,大多数网站的中文字体还是使用图片。但图片字体有很多弊端:SEO不友好,不具备的可编辑性,不支持Accessibility原则,更重要的是消耗更多流量。

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

随着移动设备的崛起,WebFont兼容性已经不足为患。字体库ttf,svg,eot,woff也是选择多多。最后剩下问题就只有中文字符集过大了。

为了减少中文字符集的体量,只能多麻烦一步:按需截取(根据网页所涉及到的文字生成小字库)压缩与转码,从而最大程度地节约流量,将字体集减到最小,即字符集子集化。

中文WebFont的现有方案

1. 本地制作
通过FontCreator等字体制作工具用Unicode码来找到需要的字,删除没有使用的字符,即制作精简版字体库。

2. 字体云服务
国内目前有两家公司提供中文WebFont云托管服务,他们能够压缩与转码字体:
1.(有字库)http://www.youziku.com

2.(就是字)http://cn.justfont.com

英文的就用TypeKit.comDafont.com

以目前实际操作来看,通过工具制作精简版字体异常繁琐;需要仔细核对字符,效率低下且容易遗漏字符而导致出错。

第三方云服务最大的问题是稳定性无法保证,不知道能否支撑海量用户访问,目前这两家中文 WebFont 平台中大型商业站点的案例还比较少,另外商业收费也不便宜。

出于性能以及可控性的考虑,在排除了第三方云服务方案后,去寻找是否有本地自动化解决方案,结果还真有。

WebFont本地自动子集化

Fontmin

Fontmin,第一个纯 JavaScript 字体子集化方案,百度EFE(Excellent FrontEnd)出品。

官方介绍:“提供了 ttf子集化,eot/woff/svg格式转换,css生成 等功能,助推 webfont 发展,提升网页文字体验”。

Fontmin有npm模块 fontmin,基于 stream 处理字体文件,简单高效,方便扩展,但字体支持有限,仅有:新蒂字体浙江民间书刻体思源字体台湾教育部標準宋體

详细介绍和用法可以看这篇文章: http://efe.baidu.com/blog/fontmin-getting-started/

文章中提到font-spider,中文名称:字蛛,它也是基于Fontmin,但看上去字体子集化已经比较成熟了。

FontSpider字蛛

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

以下为根据官方文档在ubuntu虚拟机node.js上的测试。

1. 直接使用TTF字库

两个字库是直接下载的,分别为4.7MB与3.9MB,网页打开很慢。

2. 在ubuntu里安装并进行压缩转码

安装
$npm install font-spider -g

在 CSS 中使用 WebFont:

@font-face {
font-family: ‘dbgbx’;
src: url(‘dbgbx.eot’);
src:
url(‘dbgbx.eot?#font-spider’) format(’embedded-opentype’),
url(‘dbgbx.woff2’) format(‘woff2’),
url(‘dbgbx.woff’) format(‘woff’),
url(‘dbgbx.ttf’) format(‘truetype’),
url(‘dbgbx.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
#dbgbx {
font-family: ‘dbgbx’;
font-size:28px;
line-height:40px;
}

运行 font-spider 命令

浏览器重新加载

刷新之后可以明显看到字库缩小,分别为15.3KB与17.4KB,网页刷新很快。

字蛛API

font-spider 包括爬虫与压缩器模块,接口文档:API.md

限制
  • 不支持 javascript 动态插入的元素与样式
  • .otf 字体需要转换成 .ttf 格式才能被压缩
  • 仅支持 utf-8 编码的 HTML 与 CSS 文件
  • CSS content 仅支持 content: 'prefix'content: attr(value) 这两种形式

 

免费字体

结束语

中文WebFont的子集化基于Node.Js已经顺利地本地自动化,技术上没有太多障碍了。
目前可以使用的开源中文字库还不是很多,商用使用的话,大部分字库还是需要付费的。