web前端中引入的字体文件过大如何解决?

要动态切换就做不到了。鱼和熊掌不能兼得。

一般缩小网页字体文件的方法就是把用到的那几个字单独的提炼出来。就是用不到的字不要放在字体文件里。需要你自己做一个字体文件。因为以前有写过一个类似的工具，就是把字体中的字提炼出来。后来不干这个了，文件也没了。这是一个常用的工具，你在网上自己找一找应该能找到很多类似的开源项目。我当时用的方法是字库文件比如ttf转换成svg字库，然后通过对应的字码调用相应的svg矢量字库，然后删除不需要的字体之后，再把svg转换成woff，eot，ttf等字体的方式。

例子的话现在就没有了。我只能给你说一下思路。希望对你有帮助。

——

像你提供的这个，如果就是一个展示，那么你完全可以用上面的所说的方法把需要的那几个字从字体文件里提出来，比如《字由棒棒体》，把那个字体提炼出来。

但是你要动态实现收入字体立马就变，这种提炼方式就不方便了。更快的的方式就是把每一个字分别做成单独的svg图形，这样利用一个字体对应svg字体，就可以不必一次性下载那么大几个M的文件了。毕竟一个字的SVG是很小的。

还有其他方案就是所有的字体做了CDN加速，本身字体文件虽然很大，但是几个M的文件如果通过提高网速，也不是实现不了。这个就是技术解决不了，用钱来凑了，毕竟CDN加速也是很贵的。

@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的使用基础方式：

---