『 长空的博客 』2022-03-前端字体的使用进阶
1. 普通使用
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url('YouSheBiaoTiHei.ttf');
}
div {
font-family: YouSheBiaoTiHei;
}
</style>
2. 需求
一个字体包很大，但是我们一般只有其中的几个字，比如这一次的需求，我们只用这个特殊字体展示数字，也就是可能用到的数字是
0123456789.个十百千万亿
网上有个方案可以把字体截出来，1M多的字体截完后只有1K多。
3. 软截取(unicode-range)
@font-face {
font-family: YouSheBiaoTiHei;
unicode-range: U+30-39,U+4E07,U+4EBF,U+5341,U+5343,U+767E;
}
上面的截取不会真的把字体包缩小，只是缩小了范围。
4. 硬截取(glyphhanger)
安装比较麻烦，除了依赖node，还依赖python。它的npm上链接了一篇文章介绍mac怎么安装: How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
安装步骤如下：
npm install -g glyphhanger
// 安装python3
curl https://bootstrap.pypa.io/get-pip.py | python3
// 安装截字体的python依赖
pip3 install fonttools
pip3 install brotli
pip3 install zopfli
5. glyphhanger的使用
它支持字体的转化和字体的截取。它支持从远程网页上截取字体，也支持本地截取字体。
node14是可以的，node16报如下错误
jsx
Error: ENOENT: no such file or directory, mkdir
5.1 本地截取字体
glyphhanger --whitelist=0123456789.十百千万亿 --subset=YouSheBiaoTiHei.ttf --css
执行上面的命令会生成三个文件
- YouSheBiaoTiHei-subset.ttf
- YouSheBiaoTiHei-subset.woff2
- YouSheBiaoTiHei-subset.zopfli.woff
也会输出一段css的文本
@font-face {
src: url(YouSheBiaoTiHei-subset.woff2) format("woff2"), url(YouSheBiaoTiHei-subset.zopfli.woff) format("woff"), url(YouSheBiaoTiHei-subset.ttf) format("truetype");
unicode-range: U+2E,U+30-39,U+4E07,U+4EBF,U+5341,U+5343,U+767E;
}
5.2 远程网页的使用方式
我们本地开一个服务，访问http://127.0.0.1:8080/index.html,index.html的内容如下：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url('YouSheBiaoTiHei.ttf');
}
div {
font-family: YouSheBiaoTiHei;
}
</style>
</head>
<body>
<div>
1234567890十百千万亿
</div>
</body>
然后我们执行命令
glyphhanger http://127.0.0.1:8080/index.html --family='YouSheBiaoTiHei' --subset=YouSheBiaoTiHei.ttf --css
得到跟本地一样的输出。
需要注意的是：执行命令的当前文件夹下，必须有
YouSheBiaoTiHei.ttf完整字体