dsh
e92ee27818
字体系统重做:脱离 Google Fonts,统一思源黑/宋,门面加霞鹜文楷
一、全部改走 jsdelivr 上的 Fontsource,不再依赖 Google Fonts
之前文章页的 Inter / Noto Sans SC / Playfair Display / Noto Serif SC
全部来自 fonts.googleapis.com —— 而文章页恰恰是最该稳的页面。
现在 5 份样式表都由 BaseLayout 顶部的 fontStylesheets 统一声明。
二、CJK 用可变字体(关键)
@fontsource-variable/noto-sans-sc 一份 CSS 覆盖 font-weight: 100 900,
不用为 400/500/600/700 各加载一份(那样是 4 × 105 KB = 420 KB)。
每份 CSS 内含约 100 条带 unicode-range 的 @font-face,浏览器只下载当前
页面命中的分包。完整思源黑体 3.3 MB / 101 个分包,一页通常只用到 100–300 KB。
三、层次:楷(门面点睛)> 宋(标题)> 黑(正文/UI)
- 正文/UI:思源黑体 Noto Sans SC Variable(两档都用)
- 标题:思源宋体 Noto Serif SC Variable
- 门面点睛:霞鹜文楷 LXGW WenKai(regular + bold)—— 用在站点名、
首页那句话、以及 --font-display-sans 覆盖的卡片标题
- 西文:Inter Variable(正文)+ Playfair Display(展示)
霞鹜文楷只在 fontProfile="interface" 的页面加载;文章页没加载它,
而 --font-display-sans 里它排在思源黑体前面,靠浏览器自动回退。
四、删掉鸿蒙 Sans
两档现在都用思源黑体,所以 body.font-profile-interface 那条按档覆盖字族的
规则删掉了。class 保留,它现在只用来决定是否加载文楷。
五、顺带修掉 --font-mono 断掉的回退链
原来只有 "Geist Mono", "Geist Mono Fallback" —— 这两个名字既没有 @font-face
也没装在机器上,等于整条回退链失效,浏览器退回默认字体(不是等宽)。
全站几十处 font-mono(时间线日期、偶得时间戳、内联代码、灯箱说明…)都在受影响。
补上 ui-monospace / SFMono-Regular / Menlo / Consolas / monospace。
体积账(gzip 后的样式表,和 .woff2 分包的实际下载是两回事)
文章页 62.5 KB -> 64.6 KB
门面 125.5 KB -> 127.4 KB
基本持平,换来摆脱 Google Fonts + 字体统一 + 多一款文楷
验证:pnpm build 退出码 0
- 文章页只加载 Inter + Playfair + 思源黑 + 思源宋;首页额外加载文楷两档
- 两类页面里 Google Fonts 与鸿蒙均已消失
- 产物 CSS 里 5 个字族名与 ui-monospace 回退均在
- 站点名与首页那句话的 class 已带 font-display-sans
- 字体文件实测可下载(jsdelivr 相对路径解析正常)
2026-09-17 19:35:12 +08:00
..
2026-09-17 19:35:12 +08:00
2026-09-17 18:01:44 +08:00
2026-09-17 19:35:12 +08:00
2026-09-14 20:44:12 +08:00
2026-09-17 19:35:12 +08:00
2026-09-17 17:14:08 +08:00
2026-09-17 17:29:23 +08:00
2026-09-17 18:37:20 +08:00
2026-09-14 20:44:12 +08:00
2026-09-17 19:35:12 +08:00
2026-09-17 17:14:08 +08:00
2026-09-14 20:44:12 +08:00