vite-plugin-font-spider

使用vite和font-spider压缩字体文件，不依赖于前端框架，可以用于vue，React等多种框架中。

使用方式：

1. 安装插件并配置字体
2. 浏览使用该字体的页面（要等待页面加载完毕后再切换下一个页面）
3. 关闭应用，等待生成。

安装插件

npm install vite-plugin-font-spider -D
yarn add vite-plugin-font-spider -D
pnpm add vite-plugin-font-spider -D

配置示例

import fontSpiderPlugins from "vite-plugin-font-spider";

export default defineConfig({
    plugins: [vue(),
        fontSpiderPlugins({
            // 要压缩的字体文件的font-family属性
            fontFamilyName: 'PingFang',
            // 字体文件的路径，一定要以src开头。
            fontPath: 'src/assets/PingFang-Jian-ChangGuiTi-2.ttf',
        })
    ],
});

配置参数说明

interface Options {
    //字体文件的相对路径，示例  src/assets/font/aaa.ttf
    fontPath: string;
    // 配置的字体名字
    fontFamilyName: string;
    // 满足该条件的才会被转换（暂不支持）
    regex?: RegExp;
    // 根选择器，默认是app
    rootIdSelector?: string,
    // 内部用于发送和接收请求的uri，默认/fontResult
    mockUri?: string;
    // 输出目录，默认fontResult
    outputDir?: string;
    // 临时文件目录，默认tempFont
    tempDir?: string;
    // 是否删除临时目录，默认true
    removeTempDir?: boolean;
}

介绍

该插件包含两部分。

1. 首先通过transformIndexHtml注入一个js脚本用于筛选指定的字体，并在window unload的时候发送请求，传递筛选到的所有文字。
2. 其次添加一个vite中间件拦截请求并创建临时目录，通过子进程调用font-spider压缩字体，最后保存到输出目录。