Hyde Blog

网页字体

下载

个人喜欢筑紫 A 丸的字体，所以下载的是的筑紫 A 丸，其他的字体可以自行下载。

配置

创建docs\public目录，将下载的字体文件放入fonts目录。

.
├─ docs
│ ├─ .vitepress
│ └─ public
│ │ │ └─ fonts
│ │ │ │ └─ 筑紫A丸
│ │ │ │ │ └─ TsukuARdGothicStd-Bold.ttf  >>> 字体文件
└─ node_modules

在docs\.vitepress\theme\style\font.scss目录下，创建font.scss文件，添加以下内容：

scss

/* 定义自定义中文字体 */
@font-face {
  font-family: "筑紫A丸-子集";
  src: url("/font/TsukuARdGothicStd-Bold.woff2") format("woff2");
  font-weight: 700; /* 与实际字体匹配 */
  font-display: swap;
}

#app {
  font-family: "筑紫A丸-子集", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif ;
}

在docs\.vitepress\theme\style\font.scss文件中，添加以下内容：

scss

@use "./font.scss" as *; // 字体

最后在docs\.vitepress\theme\untils文件中引入style\index.scss文件

import "./style/index.scss"; // 引入docs\.vitepress\theme\style\font.scss全局样式

验证

重新启动开发服务器，在浏览器中打开http://localhost:5173/，可以看到页面中的字体已经替换为自定义的中文字体。

字体优化

工具压缩

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

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

注意

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

woff2_compress TsukuARdGothicStd-Bold.ttf

输出示例：

woff2-compress-tools>woff2_compress TsukuARdGothicStd-Bold.ttf
Processing TsukuARdGothicStd-Bold.ttf => TsukuARdGothicStd-Bold.woff2
Compressed 17849189 to 9773299.

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

C:\Users\admin\Downloads\woff2-compress-tools>dir
 驱动器 C 中的卷是 Windows
 卷的序列号是 BA4C-A28E

 C:\Users\admin\Downloads\woff2-compress-tools 的目录

2025/04/22  01:57    <DIR>          .
2025/04/22  02:06    <DIR>          ..
2025/02/07  03:32         3,098,035 msys-2.0.dll
2025/04/22  02:01        22,379,024 TsukuARdGothicStd-Bold.ttf
2025/04/22  01:57         9,773,400 TsukuARdGothicStd-Bold.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,589,595 字节
               2 个目录 277,556,924,416 可用字节

使用 VitePress 特有优化

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

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

B. 配合 Vite 构建优化

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

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

Hyde Blog

网页字体 ​

下载 ​

配置 ​

验证 ​

字体优化 ​

工具压缩 ​

使用 VitePress 特有优化 ​

网页字体

下载

配置

验证

字体优化

工具压缩

使用 VitePress 特有优化