字体文件太大导致网页加载慢怎么办?
很多中文网站首屏发白、文字迟迟不显示,元凶往往是一整包动辄几十 MB 的中文字体被整个下载。解决思路很直接:只保留页面真正用到的那几百个字,把字体做子集化后再上线,体积通常能从几十 MB 压到几十 KB,字体加载几乎瞬间完成,首屏体验立竿见影。
小程序自定义字体库太大报错怎么解决?
微信小程序主包有 2MB 体积限制,直接塞一个完整中文字体几乎必然超限、打包报错。把字体按小程序实际会用到的文案做子集化,导出体积极小的 WOFF2 / TTF 再放进项目,就能轻松绕过主包体积限制,不必再为字体拆分包发愁。
过去要做这些,你得在本地装 Python 跑 fonttools,或用 font-spider 扫描页面后再裁剪字体——配置环境、敲命令行都挺折腾。本工具就是 font-spider / fonttools 的免安装在线替代:打开网页、传字体、填要保留的字,直接下载结果,全程在浏览器本地处理,字体不会上传服务器。
什么是字体子集化?
一套中文字体要覆盖数万个汉字,文件常常 10–40 MB。但绝大多数网页只用到其中几百到几千个字。字体子集化就是把没用到的字形删掉,只留你需要的那部分,从而把体积压缩一两个数量级。
WOFF2 vs WOFF vs TTF
- WOFF2:Brotli 压缩,体积最小,现代浏览器全支持,网页首选。
- WOFF:兼容性更广,比 TTF 小约 40%。
- TTF / OTF:未压缩原始格式,体积最大,部分非网页场景需要。
怎么用(@font-face)
/* 按从小到大列出多格式,让浏览器自选 */
@font-face {
font-family: "MyFont";
src: url("/fonts/myfont-subset.woff2") format("woff2"),
url("/fonts/myfont-subset.woff") format("woff");
font-display: swap;
}