精简网页的字体文件体积大小 由 400kb 到 29kb css vue js font

精简网页中的字体文件体积大小 由 400kb 到 29kb css vue js font

网页中用到了一些特殊字体，将其字义到了 css 中，但由于字体体积太大，所以想精简一下。

确定这个字体只用到了数字和字母，就可以将字体中其它的字符删除，来达到精简字体体积的目的。

一、实例

比如我有一个iPhone参数的页面中用到了字体 Galvji 这个字体，从系统中复制出来的字体体积挺大的，对于我 1M 带宽的服务器来说，加载速度实在是太慢。

能看到： galvji.ttc 这个字体文件下载的时间最长。其实对于带宽够用的服务器来说，400kb根本无需在意，但我比较关注细节，尤其是自己做的东西，一定要做到极致。所以接下来我们将这个字体文件精简一下。

二、编辑字体文件

1. 删除无用的其它字体样式

最初我是不知道的，直到通过字体编辑软件 FontLab(macOS) FontCreator(Windows) 打开它，才知道这个字体是多个字体结合起来的，它里面包含了：

• 普通字体
• 粗体
• 斜体
• 粗斜体
  这几个字体样式。

我们只选用其中的普通字体。导出字体的时候只选择普通字体。

导出之后的字体大小为 180kb 左右

2. 删除无用的字符

打开刚才导出的字体，能看到其中有很多我们根本不会用到的字符，我们只需要红框中的这些字体即可。

将其删除然后再导出，可以看到，最终导出的字体文件只有 29kb，我们用到的 0-9 a-z A-Z 这些字符的大小只有 29kb

三、完成

这篇好文章是转载于：学新通技术网