字体优化-亲测

字体优化-亲测

目录

• 字体优化-亲测
• 目录
• 版权
• 工具压缩
• 使用 VitePress 特有优化

[toc]

版权

https://teek.seasir.top/pages/9c027 Hyde大佬提供的，感谢大佬。

工具压缩

• 先下载这个工具字体压缩工具下载，这个工具是从 Google 的代码编译而来，是用 Cygwin 编译的，Windows 下可以使用 解压出来后大概包含以下几个文件

  

打开woff2-compress-tools文件夹，在文件管理器输入CMD，会弹出一个命令行窗口，输入以下命令：

提示

TsukuARdGothicStd-Bold.ttf 是你要压缩的字体文件的名称，你需要将其替换为你自己的字体文件的名称。

woff2_compress TsukuARdGothicStd-Regular.ttf

输出示例：

C:\Users\Administrator\Desktop\woff2-compress-tools>woff2_compress TsukuARdGothicStd-Regular.ttf
Processing TsukuARdGothicStd-Regular.ttf => TsukuARdGothicStd-Regular.woff2
Compressed 19251159 to 7924495.

C:\Users\Administrator\Desktop\woff2-compress-tools>

输出后的字体文件会在当前目录下生成一个名为TsukuARdGothicStd-Bold.woff2的文件，这个文件就是压缩后的字体文件。

C:\Users\Administrator\Desktop\woff2-compress-tools>dir
 驱动器 C 中的卷是 系统
 卷的序列号是 1AAB-47C9

 C:\Users\Administrator\Desktop\woff2-compress-tools 的目录

2025/04/22  20:57    <DIR>          .
2025/04/22  20:57    <DIR>          ..
2025/02/07  03:32         3,098,035 msys-2.0.dll
2025/03/31  12:17        24,364,608 TsukuARdGothicStd-Regular.ttf
2025/04/22  20:57         7,924,592 TsukuARdGothicStd-Regular.woff2
2025/03/04  23:28         1,779,712 woff2_compress.exe
2025/03/04  23:28         1,779,200 woff2_decompress.exe
2025/03/04  23:28         1,780,224 woff2_info.exe
               6 个文件     40,726,371 字节
               2 个目录  7,344,713,728 可用字节

C:\Users\Administrator\Desktop\woff2-compress-tools>

使用 VitePress 特有优化

• A. 按路由分块加载字体;在 .vitepress/config.mjs 中通过 head 配置动态加载：

export default defineConfig({
  head: [
    // 仅当页面包含特定 class 时加载字体
    [
      "link",
      {
        rel: "stylesheet",
        href: "./theme/styles/font.scss",
        media: "print",
        onload: "this.media='all'",
      },
    ],
  ],
});

• B. 配合 Vite 构建优化

export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 小于 4KB 的字体转为 base64
  },
});

C.自己docs\.vitepress\theme\styles\font.scss配置

@font-face {
  font-family: "筑紫A丸";
  src: url("/fonts/筑紫A丸/TsukuARdGothicStd-Regular.woff2") format("woff2");
  src: url("/fonts/筑紫A丸/TsukuARdGothicStd-Regular.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}



/* 应用字体 */
:root {
  // --vp-font-family-base: "筑紫A丸", "Ali_PuHuiTi", "霞鹜文楷", "PingFang SC", sans-serif; //base：影响正文、标题等文本。 
  --vp-font-family-base: "筑紫A丸", "PingFang SC", sans-serif; //base：影响正文、标题等文本。 
  --vp-font-family-mono: "consolas", "JetBrains Mono", "Cascadia Mono", "Not Sans SC", monospace; //mono：影响代码块的等宽字体。  
}

结束。