Hyde Blog

主题

Hyde2025-03-30 23:50:33Teek
847
3.9m
Get...

网页字体 ​

下载 ​

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

字体下载

配置 ​

  • 创建docs\public目录，将下载的字体文件放入fonts目录。
md
.
├─ 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("/fonts/TsukuARdGothicStd-Bold.woff2") format("woff2"),
    url("/fonts/TsukuARdGothicStd-Bold.ttf") format("truetype");
  font-weight: 700; /* 与实际字体匹配 */
  font-display: swap;
}

/* 应用字体 */
:root {
  --vp-font-family-base:
    "筑紫A丸-子集",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    system-ui,
    sans-serif;

    --vp-font-family-mono:
    "JetBrains Mono",
    "Cascadia Mono",
    "Not Sans SC",
    monospace; /* mono：影响代码块的等宽字体。 */
}
  • 在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/，可以看到页面中的字体已经替换为自定义的中文字体。

sh
pnpm demo:base dev

字体优化 ​

工具压缩 ​

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

打开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 特有优化 ​

警告

弃用，控制台报错

  • A. 按路由分块加载字体;在 .vitepress/config.mjs 中通过 head 配置动态加载：
ts
export default defineConfig({
  head: [
    // 仅当页面包含特定 class 时加载字体
    [
      "link",
      {
        rel: "stylesheet",
        href: "../theme/style/font.scss",
        media: "print",
        onload: "this.media='all'",
      },
    ],
  ],
});
  • B. 配合 Vite 构建优化
ts
export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 小于 4KB 的字体转为 base64
  },
});
最近更新