# 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无字体警告

---

**字体优化测试指南完成！** 🎉

**测试通过后即可提交代码！**