php按需压缩中文字体,前端中文字体压缩 font-spider

巴宏恺

2023-12-01

中文字体和英文字体相比要大很多，英文说白了就26个字母，而汉字就没有那么幸运了，所以一般前端中文字体文件都比较大，如果站点带宽ia不够的话，加载会比较缓慢，所以我们要想办法压缩下字体大小，无非就是只在字体文件中包含我们需要的汉字。

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

安装字蛛

npm install font-spider -g

在 CSS 中使用 WebFont：

/*声明 WebFont*/

@font-face {

font-family: 'pinghei';

src: url('../font/pinghei.eot');

src:

url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),

url('../font/pinghei.woff') format('woff'),

url('../font/pinghei.ttf') format('truetype'),

url('../font/pinghei.svg') format('svg');

font-weight: normal;

font-style: normal;

}

/*使用选择器指定字体*/

.home h1, .demo > .test {

font-family: 'pinghei';

}

1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

2. 开发阶段请使用相对路径的 CSS 与 WebFont

运行 font-spider 命令，压缩字体：

font-spider ./demo/*.html

font-spider 会自动读取html 文件中的汉字来进行筛选，从而实现字体压缩，缺点就是只能从静态文件压缩，如果需要动态筛选你需要

https://github.com/allanguys/font-spider-plus

除了兼容font-spider(字蛛)支持的特性：

压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积

生成字体：支持 woff2、woff、eot、svg 字体格式生成

font-spider-plus(字蛛+)还具有以下特性：

支持线上动态渲染的页面

支持线上GBK编码的文件