引言
最近在弄 three.js ,但是在加载 3D 中文字体的时候发现,带中文字体的文件太大了,从 TextLoader 加载字体文件再到绘制到我网页上的这个时间好几秒(虽然只是本地调试),所以,想着怎样压缩一下 .ttf 文件。然后看到众多网友推荐的 font-spider,就进行了如下尝试。
安装 font-spider
全局安装 font-spider
npm i font-spider -g
PS:建议这个地方 cnpm i 会快一些~
压缩字体文件
需要一个准备好的中文字体文件(C/Windows/Fonts 下找找就行),以及一个 html 文件,进行引用。
html 文件中就是自定义一个 font-family ,然后对引入的字体进行使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
@font-face {
font-family: 'myfont';
src: url(simhei.ttf);
}
.my-font {
font-size: 30px;
font-family: 'myfont'
}
</style>
</head>
<body>
<p class="my-font">我有一只小毛驴,从来也不骑</p>
</body>
</html>
使用 dos 命令来对字体文件进行 shaking
压缩后的字体文件只剩下 5k,这样对 TextLoader 的加载就不会有很大的影响。不过需要注意的是,既然是 shaking ,那么除了你在页面中代码写的文字之外,这个字体文件就没有其他文件了哈,所以如果需要新的文字,需要重新压缩 .ttf 文件。