One

主题

One2025-03-30
794
3.5m
Get...

字体优化 ​

字体优化 ​

image-20250421071803221

问题 ​

bash
@font-face {
  font-family: "筑紫A丸";
  src: url("/fonts/筑紫A丸/TsukuARdGothicStd-Regular.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}



/* 应用字体 */
:root {
  // --vp-font-family-base: "筑紫A丸", "Ali_PuHuiTi", "霞鹜文楷", "PingFang SC", sans-serif; //base：影响正文、标题等文本。 
  --vp-font-family-base: "筑紫A丸", "PingFang SC", sans-serif; //base：影响正文、标题等文本。 
  --vp-font-family-mono: "consolas", "JetBrains Mono", "Cascadia Mono", "Not Sans SC", monospace; //mono：影响代码块的等宽字体。  
}


如何对VitePress项目里的自定义字体进行优化？

回答 ​

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

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

◼ 压缩字体格式 ​

bash
# 安装工具（首次使用需安装）
npm install -g fonttools

# 转换为 woff2 格式（比TTF小40%）
pyftsubset 筑紫A丸.ttf --output-file=筑紫A丸.woff2 --flavor=woff2 --text-file=常用汉字.txt

◼ 多格式备用 ​

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

image-20250421072139107

image-20250421072152682

2. 加载策略优化 ​

◼ 预加载关键字体 ​

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

◼ 异步加载CSS ​

js
// docs/.vitepress/theme/index.ts
import { defineClientConfig } from 'vitepress'

export default defineClientConfig({
  enhance({ app, router, siteData }) {
    // 动态插入字体CSS
    const fontCSS = document.createElement('link')
    fontCSS.rel = 'stylesheet'
    fontCSS.href = '/fonts/fonts.css'
    document.head.appendChild(fontCSS)
  }
})

3. 渲染性能调优 ​

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

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

◼ 使用 size-adjust 匹配排版 ​

css
@font-face {
  font-family: "筑紫A丸 Fallback";
  src: local("PingFang SC");
  size-adjust: 105%; /* 调整使备用字体接近筑紫A丸的视觉大小 */
  ascent-override: 95%;
}

:root {
  --vp-font-family-base: 
    "筑紫A丸",
    "筑紫A丸 Fallback", /* 尺寸匹配的备用栈 */
    sans-serif;
}

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

ts
import { defineConfig } from 'vite'

export default defineConfig({
  assetsInclude: ['**/*.woff2'], // 确保字体文件被正确处理
  build: {
    assetsInlineLimit: 0, // 禁止内联字体（保持独立文件）
  },
  server: {
    fs: {
      strict: false // 允许从项目根目录加载字体
    }
  }
})

5. 验证优化效果 ​

  1. Lighthouse测试：

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

  2. 网络瀑布流分析：

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

  3. FOUT/FOIT检查：

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

最终目录结构建议 ​

docs/
├── .vitepress/
│   ├── theme/
│   │   ├── fonts/
│   │   │   ├── 筑紫A丸.woff2
│   │   │   └── fonts.css
│   │   └── index.ts
│   └── config.mts
└── index.md

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

最近更新