头像 One
头像 One

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

teek teek 797 字 4 分钟 -- 次

字体优化-豆包

最后更新于:

字体优化

image-20250421071803221

问题

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

回答

在 VitePress 项目中优化自定义字体（如你使用的「筑紫A丸」）需要兼顾加载性能和显示效果，以下是分步骤的完整优化方案：

1. 字体文件优化（关键步骤）

◼ 压缩字体格式

1# 安装工具（首次使用需安装）
2npm install -g fonttools
3
4# 转换为 woff2 格式（比TTF小40%）
5pyftsubset 筑紫A丸.ttf --output-file=筑紫A丸.woff2 --flavor=woff2 --text-file=常用汉字.txt

◼ 多格式备用

1@font-face {
2  font-family: "筑紫A丸";
3  src: 
4    url("/fonts/筑紫A丸.woff2") format("woff2"),
5    url("/fonts/筑紫A丸.woff") format("woff");
6  font-display: swap; /* 避免FOIT */
7}
  • 自己测试：安装fonttools 报错

image-20250421072139107

image-20250421072152682

2. 加载策略优化

◼ 预加载关键字体

1<!-- 在 docs/.vitepress/theme/index.html 的 <head> 中添加 -->
2<link rel="preload" href="/fonts/筑紫A丸.woff2" as="font" type="font/woff2" crossorigin>

◼ 异步加载CSS

 1// docs/.vitepress/theme/index.ts
 2import { defineClientConfig } from 'vitepress'
 3
 4export default defineClientConfig({
 5  enhance({ app, router, siteData }) {
 6    // 动态插入字体CSS
 7    const fontCSS = document.createElement('link')
 8    fontCSS.rel = 'stylesheet'
 9    fontCSS.href = '/fonts/fonts.css'
10    document.head.appendChild(fontCSS)
11  }
12})

3. 渲染性能调优

◼ 控制字体加载期间的样式

 1:root {
 2  --vp-font-family-base: 
 3    "筑紫A丸",
 4    system-ui, /* 系统默认无衬线字体兜底 */
 5    sans-serif;
 6  
 7  /* 字体未加载时的降级方案 */
 8  font-synthesis: none;
 9  text-rendering: optimizeLegibility;
10  -webkit-font-smoothing: antialiased;
11}

◼ 使用 size-adjust 匹配排版

 1@font-face {
 2  font-family: "筑紫A丸 Fallback";
 3  src: local("PingFang SC");
 4  size-adjust: 105%; /* 调整使备用字体接近筑紫A丸的视觉大小 */
 5  ascent-override: 95%;
 6}
 7
 8:root {
 9  --vp-font-family-base: 
10    "筑紫A丸",
11    "筑紫A丸 Fallback", /* 尺寸匹配的备用栈 */
12    sans-serif;
13}

4. 构建配置（vite.config.ts）

 1import { defineConfig } from 'vite'
 2
 3export default defineConfig({
 4  assetsInclude: ['**/*.woff2'], // 确保字体文件被正确处理
 5  build: {
 6    assetsInlineLimit: 0, // 禁止内联字体（保持独立文件）
 7  },
 8  server: {
 9    fs: {
10      strict: false // 允许从项目根目录加载字体
11    }
12  }
13})

5. 验证优化效果

  1. Lighthouse测试：

    1npm run build && npm run preview
    • 检查「避免不可见文本的字体加载」警告

  2. 网络瀑布流分析：

    • 确保字体在DOMContentLoaded前开始加载

  3. FOUT/FOIT检查：

    • 使用Chrome DevTools的「Performance」面板录制加载过程

最终目录结构建议

1docs/
2├── .vitepress/
3│   ├── theme/
4│   │   ├── fonts/
5│   │   │   ├── 筑紫A丸.woff2
6│   │   │   └── fonts.css
7│   │   └── index.ts
8│   └── config.mts
9└── index.md

按照此方案优化后，字体加载时间可减少50%以上，且能避免布局偏移(CLS)问题。如需进一步微调，可提供你的实际加载数据帮你分析。

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

文档导航