zqlit/blog

0 Fork 0

Files

T

- 删除20个优化相关文档
- 已整理到 docs/性能优化文档/ 文件夹
- 保留 README.md 和 archetypes/post.md

2026-06-03 13:37:53 +08:00

4.0 KiB

Raw Permalink Blame History

15-字体优化手动指南

创建日期： 2026-06-03
版本： v1.0
适用场景： 手动执行字体子集化

📋 手动操作步骤

步骤1：备份原始字体（2分钟）

Windows：

cd E:\GitHub\blog
copy themes\Ying\static\font\zql-v2.woff2 themes\Ying\static\font\zql-v2.woff2.backup
copy themes\Ying\static\font\zql-v2.woff themes\Ying\static\font\zql-v2.woff.backup

Mac/Linux：

cd E:\GitHub\blog
cp themes/Ying/static/font/zql-v2.woff2 themes/Ying/static/font/zql-v2.woff2.backup
cp themes/Ying/static/font/zql-v2.woff themes/Ying/static/font/zql-v2.woff.backup

步骤2：安装Python依赖（3分钟）

pip install fonttools brotli

验证安装：

python -c "from fontTools.ttLib import TTFont; print('fonttools installed')"

步骤3：构建Hugo站点（2分钟）

cd E:\GitHub\blog
hugo --destination=public

验证构建：

ls public/

步骤4：运行字体子集化（5分钟）

python scripts/subset-font-safe.py

预期输出：

🔤 字体子集化工具（安全版本）
==================================================
✅ 找到public目录，将扫描构建后的HTML
🔍 扫描目录: content, layouts, public
📝 提取了 2492 个唯一字符
💾 字符列表已保存到: themes/Ying/static/font\used_chars.txt
✂️  正在生成子集字体...
✅ 子集化完成！
📊 优化结果:
   子集字符数: 2485
   子集文件大小: 739.7 KB
   减少: 486.8 KB (39.7%)
🎉 所有子集字体生成成功！

步骤5：验证生成的文件（1分钟）

Windows：

dir themes\Ying\static\font\zql-v2-subset.*

Mac/Linux：

ls -lh themes/Ying/static/font/zql-v2-subset.*

预期大小：

zql-v2-subset.woff2: ~757KB
zql-v2-subset.woff: ~757KB

步骤6：更新CSS字体声明（3分钟）

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

找到第1-14行的字体声明：

@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;
}

替换为：

@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;
}

步骤7：测试验证（5分钟）

重新构建：

hugo --cleanDestinationDir
hugo server -D

访问： http://localhost:1313

检查清单：

中文字符正常
英文字符正常
深色模式正常
Network面板显示字体大小 ~757KB

步骤8：提交代码（2分钟）

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

🐛 故障排除

问题1：字符显示为方块

解决方案： 重新运行子集化脚本

问题2：字体文件404

解决方案： 检查CSS路径，清理Hugo缓存

问题3：Python脚本运行失败

解决方案： 检查Python版本和依赖

🔄 回滚方案

# 恢复原始字体
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

📊 操作时间

步骤1：备份字体 - 2分钟
步骤2：安装依赖 - 3分钟
步骤3：构建Hugo - 2分钟
步骤4：运行子集化 - 5分钟
步骤5：验证文件 - 1分钟
步骤6：更新CSS - 3分钟
步骤7：测试验证 - 5分钟
步骤8：提交代码 - 2分钟

总计：约23分钟

字体优化手动指南完成！ 🎉

按照步骤操作即可完成字体优化！

4.0 KiB Raw Permalink Blame History Unescape Escape