zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
630239960e68609b299536149e1a5c1312fa7d61
blog/themes/Ying/FINAL_FONT_TEST.md
T

9.6 KiB
Raw Blame History

🔤 字体优化 - 最终测试指南

✅ 已完成的修改

1. 字体文件已生成

  • zql-v2-subset.woff2: 757KB（优化前1.2MB，减少37%）
  • zql-v2-subset.woff: 757KB（优化前1.2MB，减少37%）

2. CSS已更新

编辑文件：themes/Ying/assets/css/main.css（第1-8行）

修改内容：

@font-face {
    font-family: 'zql';
    src: url('../font/zql-v2-subset.woff2') format('woff2'),
        url('../font/zql-v2-subset.woff') format('woff');
    font-display: swap;
}

关键改动：

  • ✅ zql-v2.woff2 → zql-v2-subset.woff2
  • ✅ zql-v2.woff → zql-v2-subset.woff
  • ✅ 删除 unicode-range（子集字体已包含所有字符）

🧪 测试步骤

步骤1：重新构建Hugo（2分钟）

cd E:\GitHub\blog

# 清理缓存
hugo --cleanDestinationDir

# 启动开发服务器
hugo server -D

步骤2：访问网站

打开浏览器访问：http://localhost:1313

步骤3：检查字体加载（DevTools）

  1. 打开DevTools（F12）
  2. 切换到 Network 面板
  3. 刷新页面（Ctrl+Shift+R）
  4. 筛选字体文件
    • 在Filter框输入：woff 或 font
    • 查看加载的字体文件

预期结果：

  • ✅ 看到 zql-v2-subset.woff2 被加载
  • ✅ 文件大小：~757KB（而不是1.2MB）
  • ✅ 无404错误
  • ✅ 加载时间更快

步骤4：视觉检查

中文字符测试

  • 导航菜单中文正常
  • 文章标题中文正常
  • 文章内容中文正常
  • 深色模式下中文正常

英文字符测试

  • 英文字母正常（A-Z, a-z）
  • 数字正常（0-9）
  • 常用符号正常（@#$%）

标点符号测试

  • 中文标点正常（，。！？、；：""''）
  • 英文标点正常（,.!?;:'"）
  • 括号正常（（）【】《》）

不同页面测试

  • 首页字体正常
  • 文章详情页字体正常
  • 友链页面字体正常
  • 归档页面字体正常

步骤5：深色模式测试

  1. 点击头像或主题切换按钮
  2. 检查深色模式下：
    • 所有文字正常显示
    • 字体颜色正确
    • 无闪烁或异常

步骤6：移动端测试（可选）

如果可能，在手机或模拟器上测试：

  • 移动端字体正常
  • 触摸交互正常
  • 字体加载速度可接受

📊 性能验证

Network面板数据记录

资源 优化前 优化后 减少
zql-v2.woff2 1.2MB ____KB ____%
zql-v2.woff 1.2MB ____KB ____%
总字体大小 2.4MB ____KB ____%

Lighthouse测试（可选）

# 使用Chrome DevTools的Lighthouse面板
# 或者部署后在线测试

预期指标：

  • Performance得分：75-85
  • 无字体相关警告
  • FCP：改善20-30%

🔍 验证子集化效果

检查字符覆盖

你的子集字体包含 2,485个字符，包括：

基本字符：

  • ✅ 英文字母（A-Z, a-z）
  • ✅ 数字（0-9）
  • ✅ 常用标点符号

中文字符：

  • ✅ 常用汉字（根据你的网站内容提取）
  • ✅ 中文标点符号
  • ✅ CJK符号

特殊符号：

  • ✅ 常用数学符号
  • ✅ 货币符号
  • ✅ 表情符号（基础）

验证方法

在浏览器Console中测试：

// 检查字体是否加载
document.fonts.ready.then(() => {
    console.log('字体加载完成');
});

// 测试特殊字符显示
console.log('测试字符：你好世界 1234 !@#$');

🐛 故障排除

问题1：字符显示为方块（□）

症状： 部分中文字符显示为方块

原因： 子集字体未包含该字符

解决方案A：重新运行子集化（扩大扫描范围）

# 删除旧的子集字体
del themes\Ying\static\font\zql-v2-subset.*

# 重新运行Python脚本
python scripts/subset-font-safe.py

解决方案B：手动添加字符

  1. 查看 themes/Ying/static/font/used_chars.txt
  2. 添加缺失的字符到文件末尾
  3. 重新运行子集化

解决方案C：保留原始字体作为fallback

编辑 themes/Ying/assets/css/main.css：

@font-face {
    font-family: 'zql';
    src: url('../font/zql-v2-subset.woff2') format('woff2'),
        url('../font/zql-v2-subset.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'zql-full';
    src: url('../font/zql-v2.woff2') format('woff2'),
        url('../font/zql-v2.woff') format('woff');
    font-display: swap;
}

body {
    font-family: 'zql', 'zql-full', serif;
}

问题2：字体文件404错误

症状： Console显示字体文件404

解决方案：

  1. 确认文件存在：dir themes\Ying\static\font\zql-v2-subset.*
  2. 检查CSS路径是否正确
  3. 清理Hugo缓存：hugo --cleanDestinationDir
  4. 重新构建：hugo server -D

问题3：字体加载缓慢

症状： 字体加载时间没有明显改善

原因： 可能是浏览器缓存

解决方案：

  1. 清除浏览器缓存（Ctrl+Shift+Delete）
  2. 使用无痕模式测试
  3. 检查Network面板，确认加载的是子集字体

🔄 回滚方案

如果优化后出现问题，立即回滚：

cd E:\GitHub\blog

# 恢复原始字体文件
copy themes\Ying\static\font\zql-v2.woff2.backup themes\Ying\static\font\zql-v2.woff2
copy themes\Ying\static\font\zql-v2.woff.backup themes\Ying\static\font\zql-v2.woff

# 恢复CSS字体声明
# 编辑 themes/Ying/assets/css/main.css
# 将 zql-v2-subset.woff2 改回 zql-v2.woff2
# 将 zql-v2-subset.woff 改回 zql-v2.woff

# 重新构建
hugo --cleanDestinationDir
hugo server -D

✅ 测试通过标准

功能标准（必须全部通过）

  • ✅ 所有页面正常显示
  • ✅ 中文字符正常（常用汉字、标点）
  • ✅ 英文字符正常（字母、数字、符号）
  • ✅ 深色模式正常
  • ✅ 响应式布局正常
  • ✅ 无Console错误

性能标准（至少达到一项）

  • ✅ 字体大小减少30%+（1.2MB → 757KB ✅ 已达成）
  • ✅ 加载时间减少20%+
  • ✅ Lighthouse无字体警告

📝 测试完成后

如果测试通过 ✅

  1. 记录性能数据

    • 填写上面的Network面板数据表
    • 截图Lighthouse结果

  2. 提交代码

    git add themes/Ying/assets/css/main.css
git add themes/Ying/static/font/zql-v2-subset.*
git commit -m "perf: 字体子集化优化 - 减少37%

- 字体大小：1.2MB → 757KB
- 使用Python fonttools提取2,485个字符
- 配合JS优化，总体性能提升55%"

  3. 部署上线

    • 推送到远程仓库
    • 部署到生产环境
    • 监控性能指标

如果部分字符异常 ⚠️

  1. 记录具体哪些字符显示异常
  2. 检查这些字符是否在API返回的数据中
  3. 重新运行子集化脚本（扩大扫描范围）
  4. 或者使用fallback方案

如果严重问题 ❌

  1. 立即回滚到原始字体
  2. 分析失败原因
  3. 考虑是否需要字体优化

🎉 预期优化效果

完成所有优化后

指标 优化前 优化后 提升
JS（首页） 800KB 350KB ⚡ -56%
JS（文章页） 800KB 450KB ⚡ -44%
字体 1.2MB 757KB ⚡ -37%
总体资源（首页） ~3MB ~1.5MB ⚡ -50%
总体资源（文章页） ~3MB ~1.6MB ⚡ -47%
Lighthouse 60 75-80 ⚡ +25-33%

💡 API数据字体问题详解

问题场景

假设你的网站通过API获取文章内容：

// 运行时通过API获取数据
fetch('https://api.example.com/articles/123')
  .then(res => res.json())
  .then(article => {
    document.querySelector('.post-content').innerHTML = article.content;
  });

字体如何工作？

  1. 字体文件已加载（757KB的子集字体）
  2. API返回文字（运行时）
  3. 浏览器应用字体到API返回的文字

关键点：

  • API返回的文字会使用已加载的字体
  • 如果文字包含子集字体中没有的字符，浏览器会使用系统字体
  • 这会导致字体不一致（部分文字是zql字体，部分是系统字体）

常见场景

场景1：API返回常用字符

{
  "title": "你好世界",
  "content": "这是一篇测试文章1234"
}

✅ 完全正常 - 所有字符都在子集字体中

场景2：API返回生僻字

{
  "title": "龙龖龘",
  "content": "这是生僻字测试"
}

⚠️ 可能异常 - "龙龖龘"中的某些字可能不在子集字体中

场景3：API返回特殊符号

{
  "title": "数学符号",
  "content": "公式：∑∏∫√"
}

⚠️ 可能异常 - 数学符号可能不在子集字体中

解决方案

方案1：扩大字符集（推荐）

重新运行子集化，扫描更多内容：

# 1. 清除旧的子集字体
del themes\Ying\static\font\zql-v2-subset.*

# 2. 重新运行（脚本会自动扫描所有内容）
python scripts/subset-font-safe.py

方案2：手动添加字符

  1. 查看 themes/Ying/static/font/used_chars.txt
  2. 添加API返回的特殊字符
  3. 重新运行子集化

方案3：使用fallback字体

@font-face {
    font-family: 'zql';
    src: url('../font/zql-v2-subset.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'zql-full';
    src: url('../font/zql-v2.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'zql', 'zql-full', system-ui, sans-serif;
}

效果：

  • 常用字符使用子集字体（快速加载）
  • 生僻字使用完整字体（自动降级）

文档版本： v1.0 创建时间： 2026-06-03 适用状态： 字体优化完成，准备测试

Reference in new issue View Git Blame Copy Permalink