字体系统重做:脱离 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 相对路径解析正常)
This commit is contained in:
dsh
2026-09-17 19:35:12 +08:00
parent ef72d52de4
commit e92ee27818
6 changed files with 81 additions and 35 deletions
+24
View File
@@ -299,6 +299,30 @@ sudo sysctl fs.inotify.max_user_watches=524288
如果连空态提示都看不到,检查 `src/data/reading.json` 是否存在(这个文件要提交进 git)。
**想换字体 / 字体是从哪加载的**
全部由 `src/layouts/BaseLayout.astro` 顶部的 `fontStylesheets` 数组决定,
走 jsdelivr 上的 Fontsource 包(**不用 Google Fonts**,国内访问不稳):
| 层级 | 字体 | 用在哪 |
|---|---|---|
| 门面点睛(楷)| 霞鹜文楷 `LXGW WenKai` | 站点名、首页那句话、卡片标题 |
| 标题(宋)| 思源宋体 `Noto Serif SC Variable` | 文章标题、页面标题 |
| 正文/UI(黑)| 思源黑体 `Noto Sans SC Variable` | 文章正文、界面、按钮 |
| 西文 | `Inter Variable` + `Playfair Display` | 西文与数字、展示衬线 |
字族名的对应关系写在 `src/styles/global.css` 的 `--font-*` token 里。
改字体只需动这两处,不用碰组件。
两个要点:
- **CJK 用可变字体**(一份 CSS 覆盖 100–900 全字重),不要改成按字重加载 ——
那样每个字重一份 105 KB 的 CSS,四档就是 420 KB
- 每份 CSS 内含约 100 条带 `unicode-range` 的 `@font-face`,浏览器只下载当前页面
实际用到的那几个分包。完整思源黑体是 3.3 MB,但一页通常只命中 100–300 KB
- 霞鹜文楷**只在门面档加载**(`fontProfile="interface"`);文章页没加载它,
所以 `--font-display-sans` 里它排在思源黑体前面、由浏览器自动回退
**改了 markdown 插件却不生效**
Astro 会把渲染好的文章缓存到 `node_modules/.astro`,而这个缓存**只按 markdown