WebFont字体文件压缩

Posted 2023-03-10

参考技术A

@font-face 对CSS3来说，现在已经不是很陌生了，页面上的很多图标都是通过字体展示出来的。但是呀，很多设计师为了页面整体好看，就喜欢用一些特殊字体，英文字体也就算了，也就26个字符加标点符号就是了，一个字体文件也不大。中华文化博大精深，岂是26个汉字能搞定的？所以中文字体库一般都是十几兆，如果将整个字体库引入到页面中，页面加载速度很受影响。为了按需加载，将页面上用的汉字提取出来，重现生成一个只有需要用的字符的字体库，这样文件会小很多。在很久之前，我们通过手动的方式来制作字体库的，具体可以查看 网络字体@font-face，如何处理网页中的特殊字体？ 。这样的手工作业方式很麻烦，于是大神们出现了很多工具。

最近有一个业务功能，要求客户端传来要用到的文字和字体，返回一个整理后的字体文件。

通过搜索呢，发现有 sfnttool.jar (Java)， Fontforge (Python)， Font Optimizer (Perl)，但是老子不会这些语言，继续搜索，发现了 font-spider —— 一款NodeJS编写的工具，这个俺会。

github

font-spider是通过读取html文件，自动检测网页中引用的字体和文字，来生成字体文件。具体的使用基础教程可查看 font-spider 前端开发字体的好工具 。

如果写一个后端接口，总不能先生成一个html文件，再运行命令吧，这样不是很合理。那就看看它的package.json，看看他的依赖包是不是有核心功能的工具。

gulp、css、browser-x等不相关的排除掉，只剩下fontmin了。

搜索一下，发现fontmin( 官网 )正是我所需要的。

github

fontmin提供了客户端、提供了命令行、也提供了NodeJS调用的方式。通过github中的package.json可以知道，核心的功能是通过fonteditor-core模块实现的。

fontmin客户端的使用基础教程—— 特殊字体神器-fontmin，秒杀一切工具 。

Node的使用基础方式：