feat(typography): 首批 6 字族落地（新增汇文明朝/站酷快乐）+ 13 款候补清单

- 新增两款自托管字族：font-huiwen（汇文明朝体，文风开源 cn-font-split 339 片切片包，用到页 +535KB、按需拉取实测 19/339 片）｜font-kuaile （站酷快乐体 +163KB）——补齐「宋明气质」与「轻松标题」两个字体缺口 - 首批 6 族全部 OFL-1.1 且允许 web 嵌入；未用字体的页面增量恒 +0.0KB （按页子集化生效） - 候补 13 款逐款标注「许可证 + web 嵌入」：HarmonyOS Sans/MiSans/OPPO Sans/阿里普惠体（免费商用 + 明确允许嵌入，但 npm 无包/整包过大）、得意黑/更纱/站酷高端黑/花园明朝（OFL 但无可用 npm 分发）、霞鹜文楷 Light（+8605KB 否决）、演示悠然小楷（"个人免费"常禁 @font-face，风险） - docs 写入「加字四步流程」（核双授权 → 装包或放 public/fonts → 加类+ 白名单+面板项 → 跑体积账） - 可视化面板 35 项（10 字族 + 25 颜色）；白名单放行 10 字族类 - 资产：public/fonts/hwmc（339 woff2 13MB + fonts.css 162KB）入仓车道：op-artalk；收编复验：构建 48 页、E2E 37/37、两款新字体 computed 与切片按需加载实测（hwmc/27、52 等 20 个请求）验证: pnpm astro build 48 页 exit 0；E2E 37/37；playwright 新字体 computed + 字体请求观测 Spec: none (字体扩展，车道级交付) Co-authored-by: GLM-5.3
2026-11-02 17:47:13 +08:00
1 parent 26bbb66a72
commit 3822e150a8
@@ -27,3 +27,7 @@ draft: false
 <p class="c-blue">蓝色标准：秋天的海面像一块被风抚平的铁皮。</p>
 <p class="c-yellow">黄色标准（已压暗）：秋天的海面像一块被风抚平的铁皮。</p>
 <p class="c-red-soft">红色 soft：秋天的海面像一块被风抚平的铁皮。</p>
+
+<p class="font-huiwen">汇文明朝体（OFL，切片自托管）：秋天的海面像一块被风抚平的铁皮。</p>
+
+<p class="font-kuaile">站酷快乐体（OFL，艺术字）：秋天的海面像一块被风抚平的铁皮。</p>
@@ -139,21 +139,36 @@ https://astro.build/
 | `quote-line` | 金句块（左侧竖线 + 文楷） |
 | `fig-cap` | 图注（居中小字） |

-**字体体积账（2026-11-02 实测，本地无 gzip 的相对值）**：
+### 首批字体（已落地，6 族 + 3 档自托管优先）

-| 候选 | 许可证 | 引入后实测 | 结论 |
+| 类名 | 字体 | 许可证 | webfont 嵌入 | 用到该字体的页面增量 |
+|---|---|---|---|---|
+| `font-serif` | Noto Serif SC | OFL-1.1 | ✅ OFL 允许 | 基线内 |
+| `font-sans` | Noto Sans SC | OFL-1.1 | ✅ | 基线内 |
+| `font-kai` | 霞鹜文楷 Screen | OFL-1.1 | ✅ | 基线内 |
+| `font-mono` | JetBrains Mono | OFL-1.1 | ✅ | 基线内 |
+| `font-huiwen` | 汇文明朝体（文风切片包 339 片） | OFL-1.1 | ✅ | **535KB** |
+| `font-kuaile` | 站酷快乐体 | OFL-1.1 | ✅ | **163KB** |
+| `font-song` / `font-kai-sys` / `font-hei-sys` | 上述自托管字体优先，系统字族兜底 | OFL-1.1 | ✅ | **+0KB** |
+
+体积账结论（2026-11-02 实测，本地无 gzip 的相对值）：**未使用某字体的页面，字体字节增量恒为 0**（构建期按页子集化 + unicode-range 按需拉取）。汇文采用文风开源的 cn-font-split 切片包（339 片），实测只拉用到字符的 19 片。
+
+### 候补字体清单（未落地，加一款约"一条命令 + 一次体积账"）
+
+| 字体 | 许可证 | 允许 webfont 嵌入 | 未落地原因 |
 |---|---|---|---|
-| 霞鹜文楷 Light/300（`@fontsource/lxgw-wenkai`） | OFL-1.1 | 用到它的页面 **+8605KB** | ❌ 远超 150KB/页 阈值，未采用 |
-| 站酷小薇（`@fontsource/zcool-xiaowei`） | OFL-1.1 | 用到它的页面 +648KB | ❌ 同上 |
-| 得意黑 Smiley Sans | OFL-1.1 | npm 无可用包（仅 GitHub release 整包，体积更大） | ⏸ 未接入 |
-| Sarasa Gothic（含 Mono） | OFL-1.1 | npm 包为空壳（需 cli 自生成切片） | ⏸ 未接入 |
-| 汇文明朝体 | 免费商用（非 OFL） | 无 npm 包 | ⏸ 未接入 |
-| 现有四族（思源宋/黑、文楷、JetBrains） | OFL-1.1 | 基线：首页 869KB / 书评 3512KB / 技术 875KB | ✅ 已是最优 |
+| HarmonyOS Sans | 华为字体许可（免费商用） | ✅ 明文允许"嵌入、捆绑、重新分发"，需标注 | npm 无包，官网整包 52MB |
+| MiSans | 小米字体许可（免费商用） | ✅ 官方 FAQ 明确 "embedded fonts: Yes"，需注明 | npm 无包 |
+| OPPO Sans | 免费授权（含商用） | ✅（附带"不向他方提供下载渠道"限制） | npm 无包 |
+| 阿里巴巴普惠体 | 免费商用全场景 | ✅ | npm 无包，9 字重体积巨大 |
+| 得意黑 Smiley Sans | OFL-1.1 | ✅ | 仅 GitHub release 整包，直链在当前网络不可达 |
+| 更纱黑体 Sarasa Gothic / Sarasa Mono | OFL-1.1 | ✅ | npm 包为空壳（需 cli 自生成切片） |
+| 花园明朝 HanaMinA/B | IPA Font License | ✅（允许嵌入） | 无 npm 包，仅兜底用 |
+| 站酷高端黑 / 站酷快乐体（已落） | OFL-1.1 | ✅ | 高端黑无 @fontsource 版本 |
+| 阿里妈妈东方大楷 / 演示悠然小楷 | 免费商用 / 个人免费 | ⚠️ 需逐款核嵌入条款 | 无包；"个人免费"字体常禁 @font-face |
+| 霞鹜文楷 Light/Bright | OFL-1.1 | ✅ | 实测 **+8605KB**（CJK 切片粒度所致） |

- 中文 webfont 的代价在 **CJK 切片粒度**：@fontsource 的 CJK 切片刻度是"用几个汉字就拉几 MB"，所以新增中文 webfont 单页增量普遍远超 150KB
- 现有四族已覆盖"宋/黑/楷/等宽"四种气质，且全部自托管 → 跨设备一致；`font-song`/`font-kai-sys`/`font-hei-sys` 因**自托管优先**，实际渲染也走站内字体（系统字族只兜底）
- `font-fangsong` 是唯一纯系统回退类：m6 未找到 OFL 自托管仿宋包（Fandol/朱雀等均无 npm 可用包），命中访客本机仿宋字体，**跨设备不保证一致**
- 未用到的字体类在构建期被按页子集化裁掉：**未使用该字体的页面字体字节增量 = 0**
+> 加新字体的流程：①核许可证与 **web 嵌入条款**（很多"个人免费"字体明文禁 @font-face，只能进系统回退）②npm 装或放入 `public/fonts/<family>/`（优选 cn-font-split 类切片包）③`global.css` 加类 + `rehype-class-whitelist` 放行 + `public/admin/typography-classes.js` 加一项 ④跑体积账，超 150KB/页 的要评估是否值得。

 ```markdown
 <span class="ink-muted">次要说明</span>
@@ -16,6 +16,7 @@
    "@fontsource-variable/noto-serif-sc": "^5.3.1",
    "@fontsource/jetbrains-mono": "^5.3.0",
    "@fontsource/noto-sans-sc": "^5.3.1",
+    "@fontsource/zcool-kuaile": "^5.3.0",
    "astro": "^7.4.4",
    "astro-pagefind": "^2.0.1",
    "exifr": "^7.1.3",
@@ -26,6 +26,9 @@ importers:
      '@fontsource/noto-sans-sc':
        specifier: ^5.3.1
        version: 5.3.1
+      '@fontsource/zcool-kuaile':
+        specifier: ^5.3.0
+        version: 5.3.0
      astro:
        specifier: ^7.4.4
        version: 7.4.4(@astrojs/markdown-remark@7.3.5)(@types/node@24.19.2)(yaml@2.9.1)
@@ -265,6 +268,9 @@ packages:
  '@fontsource/noto-serif-sc@5.3.1':
    resolution: {integrity: sha512-nIK2HyNGcUi2TGwIfrk2MItkh0O3Y5+TI8iPfPSzoNY6uyXYfQ9qqch8czk3aa1VhV4EU52uwCYCe1UDKJELpg==}

+  '@fontsource/zcool-kuaile@5.3.0':
+    resolution: {integrity: sha512-jn4vpQ6QSVEckUn7uk5a9XcZMxEksTRqljmeE1VKRGMjGd6VoXdMyLGSdnTXSVwZLCCEHaIcm/2cdQuwvasJ9w==}
+
  '@img/colour@1.1.0':
    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
    engines: {node: '>=18'}
@@ -2113,6 +2119,8 @@ snapshots:

  '@fontsource/noto-serif-sc@5.3.1': {}

+  '@fontsource/zcool-kuaile@5.3.0': {}
+
  '@img/colour@1.1.0': {}

  '@img/sharp-darwin-arm64@0.35.5':
@@ -16,6 +16,8 @@ window.TYPOGRAPHY_CLASSES = {
    { cls: 'font-kai-sys', label: '楷体族', family: '"LXGW WenKai Screen", "Kaiti SC", STKaiti, serif', kind: '自托管优先' },
    { cls: 'font-hei-sys', label: '黑体族', family: '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif', kind: '自托管优先' },
    { cls: 'font-fangsong', label: '仿宋族', family: 'FangSong, STFangsong, serif', kind: '系统回退' },
+    { cls: 'font-huiwen', label: '汇文明朝体', family: '"WF-Hwmc", serif', kind: '自托管' },
+    { cls: 'font-kuaile', label: '站酷快乐体', family: '"ZCOOL KuaiLe", serif', kind: '自托管' },
  ],
  color: [
    { cls: 'ink-1', label: '最重（标题级）', swatch: '#111113' },