头像 One
头像 One

更多功能请点顶栏「快捷菜单」

teek teek 660 字 3 分钟 -- 次

字体优化-亲测

最后更新于:

字体优化-亲测

目录

[[toc]]

[toc]

版权

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

工具压缩

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

    image-20250422205318431

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

提示

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

输出示例：

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

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

 1C:\Users\Administrator\Desktop\woff2-compress-tools>dir
 2 驱动器 C 中的卷是 系统
 3 卷的序列号是 1AAB-47C9
 4
 5 C:\Users\Administrator\Desktop\woff2-compress-tools 的目录
 6
 72025/04/22  20:57    <DIR>          .
 82025/04/22  20:57    <DIR>          ..
 92025/02/07  03:32         3,098,035 msys-2.0.dll
102025/03/31  12:17        24,364,608 TsukuARdGothicStd-Regular.ttf
112025/04/22  20:57         7,924,592 TsukuARdGothicStd-Regular.woff2
122025/03/04  23:28         1,779,712 woff2_compress.exe
132025/03/04  23:28         1,779,200 woff2_decompress.exe
142025/03/04  23:28         1,780,224 woff2_info.exe
15               6 个文件     40,726,371 字节
16               2 个目录  7,344,713,728 可用字节
17
18C:\Users\Administrator\Desktop\woff2-compress-tools>

image-20250422205814714

使用 VitePress 特有优化

  • A. 按路由分块加载字体;在 .vitepress/config.mjs 中通过 head 配置动态加载：
 1export default defineConfig({
 2  head: [
 3    // 仅当页面包含特定 class 时加载字体
 4    [
 5      "link",
 6      {
 7        rel: "stylesheet",
 8        href: "./theme/styles/font.scss",
 9        media: "print",
10        onload: "this.media='all'",
11      },
12    ],
13  ],
14});

image-20250422211020705

  • B. 配合 Vite 构建优化
1export default defineConfig({
2  build: {
3    assetsInlineLimit: 4096, // 小于 4KB 的字体转为 base64
4  },
5});

image-20250422211053474

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

 1@font-face {
 2  font-family: "筑紫A丸";
 3  src: url("/fonts/筑紫A丸/TsukuARdGothicStd-Regular.woff2") format("woff2");
 4  src: url("/fonts/筑紫A丸/TsukuARdGothicStd-Regular.ttf") format("truetype");
 5  font-weight: 300;
 6  font-style: normal;
 7  font-display: swap;
 8}
 9
10
11
12/* 应用字体 */
13:root {
14  // --vp-font-family-base: "筑紫A丸", "Ali_PuHuiTi", "霞鹜文楷", "PingFang SC", sans-serif; //base：影响正文、标题等文本。 
15  --vp-font-family-base: "筑紫A丸", "PingFang SC", sans-serif; //base：影响正文、标题等文本。 
16  --vp-font-family-mono: "consolas", "JetBrains Mono", "Cascadia Mono", "Not Sans SC", monospace; //mono：影响代码块的等宽字体。  
17}

image-20250422211130085

结束。

📡
👤 作者: One
🔗 链接: https://onedayxyy.cn/topics/1djpy
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！
最新文章

文档导航