字体系统重做:脱离 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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user