195 lines
3.7 KiB
Markdown
195 lines
3.7 KiB
Markdown
# 12-字体优化测试指南
|
||
|
||
**创建日期：** 2026-06-03
|
||
**版本：** v1.0
|
||
**适用范围：** 字体子集化优化测试
|
||
|
||
---
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 步骤1：重新构建Hugo
|
||
|
||
```bash
|
||
cd E:\GitHub\blog
|
||
hugo --cleanDestinationDir
|
||
hugo server -D
|
||
```
|
||
|
||
访问：`http://localhost:1313`
|
||
|
||
---
|
||
|
||
### 步骤2：检查字体加载
|
||
|
||
1. 打开DevTools（F12）
|
||
2. 切换到 **Network** 面板
|
||
3. 刷新页面
|
||
4. 筛选 `woff2` 或 `woff`
|
||
|
||
**预期结果：**
|
||
- ✅ 看到 `zql-v2-subset.woff2` 被加载
|
||
- ✅ 文件大小：~757KB（而不是1.2MB）
|
||
- ✅ 无404错误
|
||
|
||
---
|
||
|
||
### 步骤3：视觉检查
|
||
|
||
#### 中文字符测试
|
||
|
||
- [ ] 导航菜单中文正常
|
||
- [ ] 文章标题中文正常
|
||
- [ ] 文章内容中文正常
|
||
- [ ] 深色模式下中文正常
|
||
|
||
#### 英文字符测试
|
||
|
||
- [ ] 英文字母正常（A-Z, a-z）
|
||
- [ ] 数字正常（0-9）
|
||
- [ ] 常用符号正常（@#$%）
|
||
|
||
#### 标点符号测试
|
||
|
||
- [ ] 中文标点正常（，。！？、；：""''）
|
||
- [ ] 英文标点正常（,.!?;:'"）
|
||
- [ ] 括号正常（（）【】《》）
|
||
|
||
#### 不同页面测试
|
||
|
||
- [ ] 首页字体正常
|
||
- [ ] 文章详情页字体正常
|
||
- [ ] 友链页面字体正常
|
||
- [ ] 归档页面字体正常
|
||
- [ ] 移动端字体正常
|
||
|
||
---
|
||
|
||
### 步骤4：深色模式测试
|
||
|
||
1. 点击头像或主题切换按钮
|
||
2. 检查深色模式下：
|
||
- [ ] 所有文字正常显示
|
||
- [ ] 字体颜色正确
|
||
- [ ] 无闪烁或异常
|
||
|
||
---
|
||
|
||
## 📊 性能验证
|
||
|
||
### 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符号
|
||
|
||
---
|
||
|
||
## 🐛 故障排除
|
||
|
||
### 问题1：字符显示为方块（□）
|
||
|
||
**解决方案A：重新运行子集化**
|
||
```bash
|
||
python scripts/subset-font-safe.py
|
||
```
|
||
|
||
**解决方案B：保留原始字体作为fallback**
|
||
```css
|
||
@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', serif;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 问题2：字体文件404错误
|
||
|
||
**解决方案：**
|
||
1. 确认文件存在：`ls themes/Ying/static/font/zql-v2-subset.*`
|
||
2. 检查CSS路径是否正确
|
||
3. 清理Hugo缓存：`hugo --cleanDestinationDir`
|
||
|
||
---
|
||
|
||
## 🔄 回滚方案
|
||
|
||
### 如果优化后出现问题
|
||
|
||
```bash
|
||
# 恢复原始字体
|
||
cp themes/Ying/static/font/zql-v2.woff2.backup themes/Ying/static/font/zql-v2.woff2
|
||
cp themes/Ying/static/font/zql-v2.woff.backup themes/Ying/static/font/zql-v2.woff
|
||
|
||
# 恢复CSS
|
||
git checkout themes/Ying/assets/css/main.css
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ 测试通过标准
|
||
|
||
### 功能标准（必须全部通过）
|
||
|
||
- ✅ 所有页面正常显示
|
||
- ✅ 中文字符正常（常用汉字、标点）
|
||
- ✅ 英文字符正常（字母、数字、符号）
|
||
- ✅ 深色模式正常
|
||
- ✅ 响应式布局正常
|
||
- ✅ 无Console错误
|
||
|
||
### 性能标准（至少达到一项）
|
||
|
||
- ✅ 字体大小减少30%+（1.2MB → 757KB ✅ 已达成）
|
||
- ✅ 加载时间减少20%+
|
||
- ✅ Lighthouse无字体警告
|
||
|
||
---
|
||
|
||
**字体优化测试指南完成！** 🎉
|
||
|
||
**测试通过后即可提交代码！**
|