只保留字体文件中需要的字符,以便在Web中使用中文远程字体

CSS3中引入了Web字体功能,让Web页面的显示字体可以跳出本地字体的限制,使用任意的远程字体。这一功能很大程度上丰富了Web页面的视觉表现,如果经常访问国外网站就会注意到,它们的页面上总是会出现一些非常个性化的字体,而这些字体是我们本地机器上没有的。

但是,对于中文世界的Web页面来说,这个功能用得就比较少了,原因是显而易见的。像英语、俄语等语言的字形单元是一个个字母,数量一般都很少,做出来的字体文件体积相应地都很小,可能只有几十KB,与一张图片相当,很容易作为Web字体使用。而中文在这方面就比较麻烦了,我们知道,中文几乎每个字的字形都是不一样的,光常用字就有2500个,哪怕是做一套只包含常用字的中文字体,都需要花费大量的时间和精力。因为中文字形非常多,字体文件就不可避免地非常大,一般都是按MB计算的,这从根本上限制了中文Web字体的使用。另外,页面使用到的字形总是有限的,有大量的字形没有被使用,但是仍然占据着文件体积,利用率也是个问题。

对于Web页面上使用特殊中文字体的场景,一般都是使用图片代替,位图或者矢量图。但图片毕竟不是文字,使用图片就丢失了该处作为文字的信息(虽然必须使用文字的这种情况非常少)。比如说我的博客网站标题“亚德雷”三个字,我想使用其他的字体来展现(本地没有),又想让它还是“亚德雷”这三个文字,最好的办法当然是使用Web字体,但显然不值得为3个字去下载整套中文字体。怎么办?

思路很简单:只保留字体文件中需要的字符,移除其他所有不需要的字形,大幅减小字体文件的体积,就适合作为Web字体使用了。

下面,我就以“站酷酷黑体”这套字体为例,说一下手动实现的过程。

工具

FontCreator是一款功能强大的字体设计软件,用于创建和编辑字体。我们需要的操作主要有3种:

  1. 查找字形
  2. 删除字形
  3. 导出字体

FontCreator可以很方便地实现以上操作。

操作步骤

首先下载“站酷酷黑体”字体,得到字体文件站酷酷黑体.ttf。可以看到,这个字体文件的大小为2094KB,显然为了3个字加载2MB是不值得的事情。

在FontCreator中打开站酷酷黑体.ttf字体文件,我们可以看到字体文件中包含了很多字形,一共4428个,其中有符号、数字、英文字母、日文、中文、特殊字符等。

接下来,我们要查找我们需要的字符,并按先后顺序进行排列,以确定删除范围。

Ctrl + F可以打开搜索对话框,输入单个字符,如“亚”,点击“Find”即可搜索,找到后该字形会高亮显示,此时记下该字符的Unicode码点值(Code-points),目的是确定每个字符的先后顺序,避免范围删除时删除到需要的字符。

如“亚”、“德”、“雷”三个字符的先后顺序及Unicode码点值如下:

字符 Unicode码点
$4E9A
$5FB7
$96F7

确定所有字符的先后顺序后,就可以删除字符之间不需要的字形。按住Shift键点击字形可以连续选中,右键选中部分,点击“Delete”即可删除。

最终,除了一个放在最前面的额外字形外,剩下的只有我们需要的字符。

注意:之所以在最前面保留一个额外的字形(任意字符均可),是因为在实际测试中,第一个字形无法被使用,即如果只有“亚”、“德”、“雷”三个字符,那么“德”和“雷”可以正常显示(字体生效),而“亚”则会回退到系统默认字体(字体不生效)。我没有研究过字体文件,对于这个现象不清楚原理,只是通过实验得知,在最前面保留一个额外字符,从第二个开始的所有字符就都可用了

最后,我们可以通过File > Export Font来导出字体,导出时可以选择需要的格式。

可以看到,相比于原来的字体文件,新的字体文件的体积小了很多很多,现在的体积完全可以应用到Web中作为远程字体使用。比如可以在CSS中这么写:

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
font-family: zhankukuheiti;
src:
/* 优先使用本地字体 */
local("ZCOOL_KuHei"),
local("站酷酷黑"),
/* 若本地字体不存在,则使用远程字体 */
url("/fonts/站酷酷黑体_min.woff2") format("woff2"),
url("/fonts/站酷酷黑体_min.woff") format("woff"),
url("/fonts/站酷酷黑体_min.ttf") format("truetype"),
url("/fonts/站酷酷黑体_min.otf") format("opentype");
}

在此之后,在需要的地方使用以下CSS代码即可应用该字体样式。

1
font-family: zhankukuheiti;

以上介绍了只保留部分字符、缩小中文字体文件体积以作为Web字体使用的手动操作方法,很明显,这种方法仅适用于需要的字符种类数量不多的情况,比如标题、文字Logo等。向自动化推广可知,可以开发一个自动处理程序,对一段文本进行字符去重,然后从指定的字体文件中删除这些字符以外的其他字符,得到一个仅适用于这段本文的字体文件。可以猜想,字体网站的在线预览功能(非后端生成图片的那种方式)可能就是基于这种原理开发的。当然,可想而知,当使用的字符种类超过一定数量时,字符种类越多,这么做的必要性就越低。

另外,就像JavaScript进行minify之后不应该用.min.js文件去改写逻辑一样,缩小后的字体文件也不再是完整的字体了,不能在原需求处以外的其他地方使用(缺字)。

0%