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
This commit is contained in:
1 parent
26bbb66a72
commit
3822e150a8
348 files changed
+85
-12
No files matched your search
+27
-12
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user