vue 解决字体文件太大导致页面加载慢的问题：使用font-slice对字体文件进行分片

1、问题背景

我的网站新加了一个字体，大约6M左右。当我正式上线之后，发现页面加载就变慢了。查看具体信息发现是这个字体文件（ttf）加载用了4-6秒左右。拖慢了整体的加载效率

2、解决方法

我网上查到的方法大致有两种

方案1

提取出来用到的文字，然后修改字体文件，只把用到的文件提取出来，单独组装成一个字体文件，从而大大的缩小字体文件的体积。

而在这种方法思路之下，实现上又大致有两种

（1）自己提取出文字，使用字体文件编辑软件，手动一个一个的提取编辑就行

（2）使用相关的组件，比如font-min，可以自动做到上述的处理

但是我没有选择这种方式，原因也很简单：这个只能处理静态的文字，如果我的文字是变量赋值的，这种方式是无法处理的。使用面太受限了。

方案2

我现在使用的解决方式。参考的是一下文章

https://juejin.cn/post/7410062139275198504

原理：

将中文字体按照 Google Fonts 的切割子集方案，生成多个较小体积的资源包。仅需加载小部分字体资源即可展示完整页面。

3、具体的操作

（1）安装

npm install --save-dev font-slice

（2）我创建了一个fonts文件夹，当然，这个路径随意

（3）在这个文件夹中，把字体文件上传，并且创建脚本slice-font.js

如下

slice-font.js脚本内容

// slice-font.js

const path = require("path");
const createFontSlice = require('font-slice');

(async () => {
  try {
    await createFontSlice({
      fontPath: path.resolve(__dirname, 'miaozidongman.ttf'), // 替换为你的字体路径
      outputDir: path.resolve(__dirname, './output'),
      // 其他选项...
    });
    console.log('Font slicing completed successfully!');
  } catch (error) {
    console.error('Font slicing failed:', error);
    process.exit(1); // 如果失败，退出并返回错误码
  }
})();

（4）在package.json中加上改脚本的执行命令

"slice-font": "node assets/fonts/slice-font.js"

（5）在控制台执行命令，将字体文件进行分片

 yarn run slice-font

最后有个测试效果用到

这里我们访问这个地址看看效果

这里看到，没什么问题

（6）将刚才生成的font.css文件引入到需要使用的页面上即可

或者公共引用

4、分析

查看生成的font.css文件

可以看到有个属性：unicode-range

应该是文字的unicode编码去匹配相关的文件，单独只加载匹配到的字体文件，从而达到减少加载量的效果

5、碰到的问题1

我初始安装了font-slice之后，运行的时候报了以下的错误信息

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/ttf/getEmptyttfObject' is not defined by "exports" in C:\Users\DAM\Desktop\xxx\xxx-php8\node_modules\fonteditor-core\package.json

node:internal/modules/esm/resolve:304
  return new ERR_PACKAGE_PATH_NOT_EXPORTED(
         ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/ttf/getEmptyttfObject' is not defined by "exports" in C:\Users\DAM\Desktop\xxx\xxx-php8\node_modules\fonteditor-core\package.json
    at exportsNotFound (node:internal/modules/esm/resolve:304:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:651:9)
    at resolveExports (node:internal/modules/cjs/loader:634:36)
    at Module._findPath (node:internal/modules/cjs/loader:724:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1211:27)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (C:\Users\DAM\Desktop\xxx\xxx-php8\node_modules\fontmin\plugins\svgs2ttf.js:18:25)
    at Module._compile (node:internal/modules/cjs/loader:1469:14) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

原因：

font-slice对于字体文件的分割操作实际上用到了这个组件：fonteditor-core

而这个组件版本有bug，我安装的版本是V2.5.*

具体的描述可以查看

https://github.com/kekee000/fonteditor-core/issues/72

原作者说是会修复的，等到我后续查看的时候，是已经修复了。

解决方法

如果确实还有问题的话，尝试主动安装一下fonteditor-core的其他版本

比如，我这里看到的最低版本要求是2.1.11。所以执行以下命令

npm install fonteditor-core@2.1.11

然后再重复刚才的操作即可

6、碰到的问题2

字体文件分片都没有问题，但是运行localhsot:8001进行验证的时候，发现字体没生效

这里需要注意下，字体文件不要到英文的点

比如，我之前无效的时候的字体文件的文件名是：miaozidongmanv1.22.ttf

后来我改成了miaozidongman.ttf就可以