610 lines
15 KiB
Markdown
610 lines
15 KiB
Markdown
# 第3步：字体子集化优化 - 实施方案
|
||
|
||
## 📋 当前字体分析
|
||
|
||
### 字体文件清单
|
||
|
||
#### 1. zql-v2.woff2（自定义中文字体）
|
||
**位置：** `themes/Ying/static/font/zql-v2.woff2`
|
||
**当前大小：** 约 800KB - 2MB（包含完整中文字符集）
|
||
**用途：** 正文显示（body默认字体）
|
||
|
||
**问题：**
|
||
- 包含全部中文字符（20,000+）
|
||
- 实际使用的字符可能只有500-2000个
|
||
- 大量未使用的字符浪费带宽
|
||
|
||
#### 2. zql-v2.woff（降级格式）
|
||
**位置：** `themes/Ying/static/font/zql-v2.woff`
|
||
**当前大小：** 与woff2类似
|
||
**用途：** 不支持woff2的浏览器降级
|
||
|
||
#### 3. remixicon.woff2/woff（图标字体）
|
||
**位置：** `themes/Ying/static/font/remixicon.*`
|
||
**大小：** 约 100-200KB
|
||
**用途：** UI图标（搜索、主题切换等）
|
||
|
||
**注意：** 图标字体通常不建议子集化，因为图标字符集是固定的
|
||
|
||
---
|
||
|
||
## 🎯 优化策略
|
||
|
||
### 策略1：自动字符提取（推荐）
|
||
|
||
使用工具自动扫描HTML文件，提取实际使用的字符，生成子集字体。
|
||
|
||
**优点：**
|
||
- 全自动化，无需手动维护
|
||
- 准确提取所有使用的字符
|
||
- 可集成到构建流程
|
||
|
||
**工具选项：**
|
||
1. **glyphhanger** - Google推荐
|
||
2. **fonttools** - Python工具
|
||
3. **subfont** - 基于PostCSS
|
||
|
||
### 策略2：手动字符列表
|
||
|
||
手动列出常用的中文字符（GB2312常用字约6,763个）
|
||
|
||
**优点：**
|
||
- 字符集稳定，不会遗漏
|
||
- 适合内容变化不大的网站
|
||
|
||
**缺点：**
|
||
- 可能包含未使用的字符
|
||
- 需要手动维护
|
||
|
||
---
|
||
|
||
## 📝 实施方案：策略1（自动字符提取）
|
||
|
||
### 步骤3.1：安装glyphhanger
|
||
|
||
```bash
|
||
# 使用npm全局安装
|
||
npm install -g glyphhanger
|
||
|
||
# 或者使用pip安装fonttools
|
||
pip install fonttools brotli
|
||
|
||
# 或者使用subfont
|
||
npm install -g subfont
|
||
```
|
||
|
||
### 步骤3.2：扫描网站提取字符
|
||
|
||
#### 方法1：从本地构建文件扫描
|
||
|
||
```bash
|
||
# 先构建Hugo站点
|
||
cd E:\GitHub\blog
|
||
hugo
|
||
|
||
# 使用glyphhanger扫描public目录
|
||
glyphhanger --subset=themes/Ying/static/font/zql-v2.woff2 \
|
||
--formats=woff2 \
|
||
--CSS=public/css/*.css \
|
||
--HTML=public/**/*.html \
|
||
--output=themes/Ying/static/font/
|
||
```
|
||
|
||
#### 方法2：从在线网站扫描（推荐）
|
||
|
||
```bash
|
||
# 扫描在线网站（需要先部署或本地预览）
|
||
glyphhanger https://your-blog-url.com \
|
||
--subset=themes/Ying/static/font/zql-v2.woff2 \
|
||
--formats=woff2 \
|
||
--output=themes/Ying/static/font/
|
||
```
|
||
|
||
#### 方法3：使用fonttools手动提取
|
||
|
||
```bash
|
||
# 1. 提取所有使用的字符到文本文件
|
||
python3 << 'EOF'
|
||
import os
|
||
import re
|
||
|
||
def extract_chars_from_html(directory):
|
||
chars = set()
|
||
for root, dirs, files in os.walk(directory):
|
||
for file in files:
|
||
if file.endswith('.html') or file.endswith('.md'):
|
||
filepath = os.path.join(root, file)
|
||
with open(filepath, 'r', encoding='utf-8') as f:
|
||
content = f.read()
|
||
# 提取中文字符
|
||
chinese_chars = re.findall(r'[一-鿿]', content)
|
||
chars.update(chinese_chars)
|
||
# 提取英文和数字
|
||
ascii_chars = re.findall(r'[a-zA-Z0-9]', content)
|
||
chars.update(ascii_chars)
|
||
# 提取常用标点
|
||
punctuation = re.findall(r'[，。！？、；：""''（）【】《》]', content)
|
||
chars.update(punctuation)
|
||
return chars
|
||
|
||
# 扫描content和layouts目录
|
||
content_chars = extract_chars_from_html('content')
|
||
layout_chars = extract_chars_from_html('layouts')
|
||
all_chars = content_chars | layout_chars
|
||
|
||
# 保存到文件
|
||
with open('used_chars.txt', 'w', encoding='utf-8') as f:
|
||
f.write(''.join(sorted(all_chars)))
|
||
|
||
print(f"提取了 {len(all_chars)} 个字符")
|
||
EOF
|
||
|
||
# 2. 使用fonttools生成子集字体
|
||
pip install fonttools brotli
|
||
|
||
python3 << 'EOF'
|
||
from fontTools.ttLib import TTFont
|
||
from fontTools.subset import Subsetter, Options
|
||
|
||
# 读取使用的字符
|
||
with open('used_chars.txt', 'r', encoding='utf-8') as f:
|
||
used_chars = set(f.read())
|
||
|
||
# 加载原始字体
|
||
font = TTFont('themes/Ying/static/font/zql-v2.woff2')
|
||
|
||
# 配置子集化选项
|
||
options = Options()
|
||
options.flavor = 'woff2'
|
||
options.desubroutinize = True
|
||
|
||
# 创建子集化器
|
||
subsetter = Subsetter(options=options)
|
||
subsetter.populate(text=''.join(used_chars))
|
||
|
||
# 执行子集化
|
||
subsetter.subset(font)
|
||
|
||
# 保存子集字体
|
||
font.save('themes/Ying/static/font/zql-v2-subset.woff2')
|
||
|
||
print("子集字体生成完成！")
|
||
EOF
|
||
```
|
||
|
||
### 步骤3.3：更新CSS字体声明
|
||
|
||
**修改文件：** `themes/Ying/assets/css/main.css`
|
||
|
||
**当前代码（第1-14行）：**
|
||
```css
|
||
@font-face {
|
||
font-family: 'zql';
|
||
src: url('../font/zql-v2.woff2') format('woff2'),
|
||
url('../font/zql-v2.woff') format('woff');
|
||
font-display: swap;
|
||
unicode-range: U+0000-007F,
|
||
/* 基本拉丁字母 */
|
||
U+4E00-9FFF,
|
||
/* 基本汉字 */
|
||
U+2000-206F,
|
||
/* 通用标点符号 */
|
||
U+3000-303F;
|
||
/* 中文标点符号 */
|
||
}
|
||
```
|
||
|
||
**修改后代码：**
|
||
```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;
|
||
/* 不再需要unicode-range，因为已经是子集 */
|
||
}
|
||
|
||
/* 保留原始字体作为fallback（可选） */
|
||
@font-face {
|
||
font-family: 'zql-fallback';
|
||
src: url('../font/zql-v2.woff2') format('woff2'),
|
||
url('../font/zql-v2.woff') format('woff');
|
||
font-display: swap;
|
||
unicode-range: U+0000-007F, U+4E00-9FFF, U+2000-206F, U+3000-303F;
|
||
}
|
||
|
||
body {
|
||
font-family: 'zql', 'zql-fallback', serif;
|
||
}
|
||
```
|
||
|
||
### 步骤3.4：同步更新critical.css
|
||
|
||
**修改文件：** `themes/Ying/assets/css/critical.css`
|
||
|
||
**当前代码（第16-23行）：**
|
||
```css
|
||
/* 字体声明 */
|
||
@font-face {
|
||
font-family: 'zql';
|
||
src: url('../font/zql-v2.woff2') format('woff2'),
|
||
url('../font/zql-v2.woff') format('woff');
|
||
font-display: swap;
|
||
unicode-range: U+0000-007F, U+4E00-9FFF, U+2000-206F, U+3000-303F;
|
||
}
|
||
```
|
||
|
||
**修改后代码：**
|
||
```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;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 自动化脚本
|
||
|
||
### 创建构建脚本
|
||
|
||
**文件路径：** `themes/Ying/scripts/subset-fonts.sh`
|
||
|
||
```bash
|
||
#!/bin/bash
|
||
# 字体子集化自动化脚本
|
||
# 用法：./scripts/subset-fonts.sh [online|local]
|
||
|
||
set -e
|
||
|
||
MODE=${1:-local}
|
||
BLOG_URL=${2:-http://localhost:1313}
|
||
FONT_DIR="themes/Ying/static/font"
|
||
ORIGINAL_FONT="$FONT_DIR/zql-v2.woff2"
|
||
SUBSET_FONT="$FONT_DIR/zql-v2-subset.woff2"
|
||
|
||
echo "🔤 开始字体子集化..."
|
||
echo "模式: $MODE"
|
||
|
||
# 检查依赖
|
||
if ! command -v glyphhanger &> /dev/null; then
|
||
echo "❌ glyphhanger未安装，正在安装..."
|
||
npm install -g glyphhanger
|
||
fi
|
||
|
||
# 备份原始字体
|
||
if [ ! -f "$ORIGINAL_FONT.bak" ]; then
|
||
cp "$ORIGINAL_FONT" "$ORIGINAL_FONT.bak"
|
||
echo "✅ 原始字体已备份到 $ORIGINAL_FONT.bak"
|
||
fi
|
||
|
||
if [ "$MODE" = "online" ]; then
|
||
echo "📡 从在线网站扫描字符..."
|
||
glyphhanger "$BLOG_URL" \
|
||
--subset="$ORIGINAL_FONT" \
|
||
--formats=woff2,woff \
|
||
--output="$FONT_DIR/"
|
||
else
|
||
echo "📁 从本地文件扫描字符..."
|
||
|
||
# 先构建Hugo
|
||
echo "🔨 构建Hugo站点..."
|
||
hugo --destination=public_temp
|
||
|
||
# 扫描HTML和CSS
|
||
glyphhanger \
|
||
--subset="$ORIGINAL_FONT" \
|
||
--formats=woff2,woff \
|
||
--CSS=public_temp/css/*.css \
|
||
--HTML=public_temp/**/*.html \
|
||
--output="$FONT_DIR/"
|
||
|
||
# 清理临时目录
|
||
rm -rf public_temp
|
||
fi
|
||
|
||
# 检查生成的文件
|
||
if [ -f "$SUBSET_FONT" ]; then
|
||
ORIGINAL_SIZE=$(stat -f%z "$ORIGINAL_FONT" 2>/dev/null || stat -c%s "$ORIGINAL_FONT")
|
||
SUBSET_SIZE=$(stat -f%z "$SUBSET_FONT" 2>/dev/null || stat -c%s "$SUBSET_FONT")
|
||
REDUCTION=$((ORIGINAL_SIZE - SUBSET_SIZE))
|
||
PERCENTAGE=$((REDUCTION * 100 / ORIGINAL_SIZE))
|
||
|
||
echo ""
|
||
echo "✅ 字体子集化完成！"
|
||
echo "📊 大小对比："
|
||
echo " 原始字体: $(numfmt --to=iec $ORIGINAL_SIZE)"
|
||
echo " 子集字体: $(numfmt --to=iec $SUBSET_SIZE)"
|
||
echo " 减少: $(numfmt --to=iec $REDUCTION) ($PERCENTAGE%)"
|
||
echo ""
|
||
echo "📝 下一步："
|
||
echo " 1. 更新CSS中的字体路径为 zql-v2-subset.woff2"
|
||
echo " 2. 测试网站显示是否正常"
|
||
echo " 3. 提交代码"
|
||
else
|
||
echo "❌ 子集字体生成失败"
|
||
exit 1
|
||
fi
|
||
```
|
||
|
||
### 设置执行权限
|
||
|
||
```bash
|
||
chmod +x themes/Ying/scripts/subset-fonts.sh
|
||
```
|
||
|
||
### 使用方法
|
||
|
||
```bash
|
||
# 方法1：从本地文件扫描（推荐开发时使用）
|
||
./themes/Ying/scripts/subset-fonts.sh local
|
||
|
||
# 方法2：从在线网站扫描（推荐部署前使用）
|
||
./themes/Ying/scripts/subset-fonts.sh online https://your-blog.com
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 预期收益
|
||
|
||
### 文件大小对比（预估）
|
||
|
||
| 字体文件 | 优化前 | 优化后 | 减少 |
|
||
|---------|--------|--------|------|
|
||
| **zql-v2.woff2** | 1.2MB | 150KB | ⚡ -87% |
|
||
| **zql-v2.woff** | 1.5MB | 200KB | ⚡ -87% |
|
||
|
||
### 加载时间提升
|
||
|
||
| 指标 | 优化前 | 优化后 | 提升 |
|
||
|------|--------|--------|------|
|
||
| **字体下载时间** | ~3s (3G) | ~0.5s (3G) | ⚡ -83% |
|
||
| **FCP** | +0.5s | +0.1s | ⚡ -80% |
|
||
| **FOIT时间** | 长 | 短 | ⚡ 显著改善 |
|
||
|
||
### 用户体验提升
|
||
|
||
- ✅ 字体加载更快
|
||
- ✅ 文字闪烁减少（FOIT/FOUT）
|
||
- ✅ 移动端体验更好（节省流量）
|
||
- ✅ 首屏渲染更快
|
||
|
||
---
|
||
|
||
## 🧪 测试验证清单
|
||
|
||
### 功能测试
|
||
|
||
#### 1. 字体显示测试
|
||
- [ ] 中文字符正确显示
|
||
- [ ] 常用汉字（你好世界）
|
||
- [ ] 生僻字（如果文章中有）
|
||
- [ ] 中文标点符号（，。！？）
|
||
- [ ] 英文字符正确显示
|
||
- [ ] 大写字母（A-Z）
|
||
- [ ] 小写字母（a-z）
|
||
- [ ] 数字（0-9）
|
||
- [ ] 特殊符号正确显示
|
||
- [ ] 常用符号（@#$%）
|
||
- [ ] 数学符号（如果文章中有）
|
||
|
||
#### 2. 不同页面测试
|
||
- [ ] 首页文章列表字体正常
|
||
- [ ] 文章详情页字体正常
|
||
- [ ] 友链页面字体正常
|
||
- [ ] 归档页面字体正常
|
||
- [ ] 移动端字体正常
|
||
|
||
#### 3. 深色模式测试
|
||
- [ ] 深色模式下字体正常
|
||
- [ ] 切换主题时字体无闪烁
|
||
|
||
### 性能测试
|
||
|
||
#### 1. Network面板检查
|
||
- [ ] 字体文件大小显著减小
|
||
- [ ] 字体加载时间缩短
|
||
- [ ] 无404错误（字体文件路径正确）
|
||
|
||
#### 2. Lighthouse检查
|
||
- [ ] Performance得分提升
|
||
- [ ] FCP指标改善
|
||
- [ ] 无字体相关警告
|
||
|
||
### 兼容性测试
|
||
|
||
#### 浏览器测试
|
||
- [ ] Chrome（最新版）
|
||
- [ ] Firefox（最新版）
|
||
- [ ] Safari（最新版）
|
||
- [ ] Edge（最新版）
|
||
- [ ] 移动端Chrome
|
||
- [ ] 移动端Safari
|
||
|
||
---
|
||
|
||
## 🐛 故障排除
|
||
|
||
### 问题1：字符显示为方块（□）
|
||
|
||
**症状：** 某些中文字符显示为方块
|
||
|
||
**原因：** 子集字体未包含该字符
|
||
|
||
**解决方案：**
|
||
1. 检查生成的字符列表（used_chars.txt）
|
||
2. 确认该字符在HTML中存在
|
||
3. 重新运行子集化脚本
|
||
4. 或者手动添加该字符到字符列表
|
||
|
||
### 问题2：字体文件404错误
|
||
|
||
**症状：** 浏览器Console显示字体文件404
|
||
|
||
**原因：** CSS中的字体路径不正确
|
||
|
||
**解决方案：**
|
||
1. 检查字体文件是否在正确的目录
|
||
2. 确认CSS中的路径正确
|
||
3. 检查Hugo的静态文件配置
|
||
|
||
### 问题3：字体加载缓慢
|
||
|
||
**症状：** 字体加载时间没有明显改善
|
||
|
||
**原因：** 可能是网络问题或CDN配置
|
||
|
||
**解决方案：**
|
||
1. 检查字体文件是否真的减小了
|
||
2. 确认CDN缓存已更新
|
||
3. 使用浏览器禁用缓存重新测试
|
||
|
||
### 问题4：子集化后字符缺失
|
||
|
||
**症状：** 部分文章的特殊字符显示异常
|
||
|
||
**解决方案：**
|
||
```bash
|
||
# 方法1：扩大字符范围
|
||
# 修改glyphhanger命令，增加更多页面
|
||
glyphhanger https://your-blog.com/sitemap.xml \
|
||
--subset=themes/Ying/static/font/zql-v2.woff2 \
|
||
--formats=woff2,woff \
|
||
--output=themes/Ying/static/font/
|
||
|
||
# 方法2：使用更大的字符集（GB2312）
|
||
# 下载GB2312字符列表
|
||
curl -o gb2312_chars.txt https://example.com/gb2312_chars.txt
|
||
|
||
# 添加到字符集
|
||
cat gb2312_chars.txt >> used_chars.txt
|
||
sort -u used_chars.txt -o used_chars.txt
|
||
|
||
# 重新生成子集字体
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 回滚方案
|
||
|
||
如果优化后字体显示异常，快速回滚：
|
||
|
||
```bash
|
||
# 恢复原始字体文件
|
||
cp themes/Ying/static/font/zql-v2.woff2.bak themes/Ying/static/font/zql-v2.woff2
|
||
cp themes/Ying/static/font/zql-v2.woff.bak themes/Ying/static/font/zql-v2.woff
|
||
|
||
# 恢复CSS字体声明
|
||
# 将 zql-v2-subset.woff2 改回 zql-v2.woff2
|
||
```
|
||
|
||
或者恢复CSS中的字体声明：
|
||
|
||
```css
|
||
/* 回滚到原始字体 */
|
||
@font-face {
|
||
font-family: 'zql';
|
||
src: url('../font/zql-v2.woff2') format('woff2'),
|
||
url('../font/zql-v2.woff') format('woff');
|
||
font-display: swap;
|
||
unicode-range: U+0000-007F, U+4E00-9FFF, U+2000-206F, U+3000-303F;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📈 最佳实践
|
||
|
||
### 1. 定期更新子集字体
|
||
|
||
每当网站内容大幅更新时，重新运行子集化脚本：
|
||
|
||
```bash
|
||
# 每月或每季度运行一次
|
||
./themes/Ying/scripts/subset-fonts.sh online https://your-blog.com
|
||
```
|
||
|
||
### 2. 监控字体大小
|
||
|
||
在CI/CD流程中添加字体大小检查：
|
||
|
||
```yaml
|
||
# .github/workflows/build.yml
|
||
- name: Check font size
|
||
run: |
|
||
FONT_SIZE=$(stat -c%s themes/Ying/static/font/zql-v2-subset.woff2)
|
||
if [ $FONT_SIZE -gt 500000 ]; then
|
||
echo "⚠️ 字体文件过大：$(numfmt --to=iec $FONT_SIZE)"
|
||
exit 1
|
||
fi
|
||
```
|
||
|
||
### 3. 使用CDN缓存
|
||
|
||
确保字体文件通过CDN分发，并设置长期缓存：
|
||
|
||
```nginx
|
||
# Nginx配置
|
||
location ~* \.(woff2|woff)$ {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ 完成确认清单
|
||
|
||
- [ ] 安装glyphhanger或fonttools
|
||
- [ ] 运行子集化脚本
|
||
- [ ] 生成子集字体文件
|
||
- [ ] 更新CSS字体声明
|
||
- [ ] 同步更新critical.css
|
||
- [ ] 测试字体显示
|
||
- [ ] 测试不同页面
|
||
- [ ] 测试深色模式
|
||
- [ ] 使用Lighthouse验证性能提升
|
||
- [ ] 提交代码
|
||
|
||
---
|
||
|
||
## 🎉 三步优化完成总结
|
||
|
||
### 第1步：CSS加载优化 ✅
|
||
- 关键CSS内联到<head>
|
||
- 非关键CSS异步加载
|
||
- 预期FCP提升20-30%
|
||
|
||
### 第2步：JS按需加载优化 ✅
|
||
- 核心JS始终加载
|
||
- 页面特定JS按需加载
|
||
- 非关键JS延迟加载
|
||
- 预期TTI提升25-35%
|
||
|
||
### 第3步：字体子集化优化 ⏳
|
||
- 自动提取实际使用的字符
|
||
- 生成子集字体
|
||
- 预期字体大小减少80-90%
|
||
|
||
---
|
||
|
||
## 📊 总体性能提升预估
|
||
|
||
| 指标 | 优化前 | 优化后 | 提升 |
|
||
|------|--------|--------|------|
|
||
| **CSS大小** | ~500KB | ~20KB (首屏) | ⚡ -96% |
|
||
| **JS大小** | ~800KB | ~350KB (首页) | ⚡ -56% |
|
||
| **字体大小** | ~1.5MB | ~200KB | ⚡ -87% |
|
||
| **FCP** | ~2.5s | ~1.2s | ⚡ -52% |
|
||
| **TTI** | ~4s | ~2s | ⚡ -50% |
|
||
| **Lighthouse得分** | ~60 | ~90+ | ⚡ +50% |
|
||
|
||
---
|
||
|
||
**文档版本：** v1.0
|
||
**创建日期：** 2026-06-03
|
||
**优化工具：** Claude AI
|