个人喜欢筑紫 A 丸的字体，所以下载的是的筑紫 A 丸，其他的字体可以自行下载。
docs\public目录，将下载的字体文件放入fonts目录。md
.
├─ docs
│ ├─ .vitepress
│ └─ public
│ │ │ └─ fonts
│ │ │ │ └─ 筑紫A丸
│ │ │ │ │ └─ TsukuARdGothicStd-Bold.ttf >>> 字体文件
└─ node_modulesdocs\.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文件ts
import "./style/index.scss"; // 引入docs\.vitepress\theme\style\font.scss全局样式重新启动开发服务器，在浏览器中打开http://localhost:5173/，可以看到页面中的字体已经替换为自定义的中文字体。
打开woff2-compress-tools文件夹，在文件管理器输入CMD，会弹出一个命令行窗口，输入以下命令：
注意
TsukuARdGothicStd-Bold.ttf 是你要压缩的字体文件的名称，你需要将其替换为你自己的字体文件的名称。
sh
woff2_compress TsukuARdGothicStd-Bold.ttf输出示例：
sh
woff2-compress-tools>woff2_compress TsukuARdGothicStd-Bold.ttf
Processing TsukuARdGothicStd-Bold.ttf => TsukuARdGothicStd-Bold.woff2
Compressed 17849189 to 9773299.输出后的字体文件会在当前目录下生成一个名为TsukuARdGothicStd-Bold.woff2的文件，这个文件就是压缩后的字体文件。
sh
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/config.mjs 中通过 head 配置动态加载：ts
export default defineConfig({
head: [
// 仅当页面包含特定 class 时加载字体
[
"link",
{
rel: "stylesheet",
href: "../theme/style/font.scss",
media: "print",
onload: "this.media='all'",
},
],
],
});Vite 构建优化ts
export default defineConfig({
build: {
assetsInlineLimit: 4096, // 小于 4KB 的字体转为 base64
},
});此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。