门面字体改为霞鹜新致宋(LXGW Neo ZhiSong)
按站主要求,门面档(fontProfile="interface")整体换成霞鹜新致宋。
文章页不受影响,仍是思源黑体 —— 宋体在长正文里不如黑体好读。
- BaseLayout:门面档额外加载 ZeoSeven 的 22 号字体,替换掉原来的霞鹜文楷
(文楷 regular + bold 两档一起删掉)
- global.css:--font-display-sans 换成新致宋;恢复按下 font-profile-interface
覆盖字族的规则,让门面整体走宋体(思源黑体兜底)
- 站点名与首页那句话本来就挂在 --font-display-sans 上,无需改动
为什么必须用 ZeoSeven 而不是 jsdelivr
jsdelivr 上的 lxgw-neo-zhisong-webfont@1.0.0 是**单文件 4.45 MB、没有
unicode-range 分包**,挂上去等于每个访客都要下 4.45 MB,不能用。
ZeoSeven 的 /22/main/result.css 把字体切成 145 个 unicode-range 分包
(CSS 158 KB / gzip 54 KB),浏览器只下当前页面命中的那几个。
Fontsource 没有收录这款字(三个包名都 404),所以没有更统一的来源。
实测 ZeoSeven 响应稳定(连续 3 次均 200,耗时约 0.11s),分包可下。
已知取舍
新致宋只有 400 一个字重,门面里的 font-medium / font-semibold / font-bold
会由浏览器合成加粗。宋体的合成加粗偏糊,如果观感不好,把那几处字重去掉
改用常规字重即可。这一点已写进操作指南。
体积(样式表 gzip)
门面:原 127.4 KB(思源黑 + 思源宋 + Inter + Playfair + 文楷两档)
→ 118.9 KB(思源黑 + 思源宋 + Inter + Playfair + 新致宋)
文章页:不变
验证:pnpm build 退出码 0
- 首页加载 zeoseven/22/main/result.css;文章页不加载
- 两类页面均无 lxgw-wenkai 残留
- 产物 CSS 里 --font-display-sans 为 "LXGW Neo ZhiSong",
body.font-profile-interface 覆盖规则与思源黑体兜底均在
This commit is contained in:
+12
-2
@@ -306,11 +306,21 @@ sudo sysctl fs.inotify.max_user_watches=524288
|
||||
|
||||
| 层级 | 字体 | 用在哪 |
|
||||
|---|---|---|
|
||||
| 门面点睛(楷)| 霞鹜文楷 `LXGW WenKai` | 站点名、首页那句话、卡片标题 |
|
||||
| 标题(宋)| 思源宋体 `Noto Serif SC Variable` | 文章标题、页面标题 |
|
||||
| 门面整体(宋)| 霞鹜新致宋 `LXGW Neo ZhiSong` | 门面档全部文字(站点名、首页那句话、卡片标题、UI)|
|
||||
| 标题(宋)| 思源宋体 `Noto Serif SC Variable` | 文章页标题、页面标题 |
|
||||
| 正文/UI(黑)| 思源黑体 `Noto Sans SC Variable` | 文章正文、界面、按钮 |
|
||||
| 西文 | `Inter Variable` + `Playfair Display` | 西文与数字、展示衬线 |
|
||||
|
||||
门面(`fontProfile="interface"`)整体走宋体,文章页保持黑体 —— 宋体在长正文里
|
||||
不如黑体好读。门面之所以能用宋体,是因为它没有大段正文。
|
||||
|
||||
> ⚠️ **霞鹜新致宋只有 ZeoSeven 有分包版本。** jsdelivr 上的
|
||||
> `lxgw-neo-zhisong-webfont` 是**单文件 4.45 MB、没有 unicode-range**,
|
||||
> 每次全量下载,**不能用**。ZeoSeven 把它切成 145 个 unicode-range 分包,
|
||||
> 浏览器只下页面用到的那几个。
|
||||
> 另外它**只有 400 一个字重**,门面里的 `font-medium/semibold/bold`
|
||||
> 都是浏览器合成的加粗;嫌糊就把那几处改成常规字重。
|
||||
|
||||
字族名的对应关系写在 `src/styles/global.css` 的 `--font-*` token 里。
|
||||
改字体只需动这两处,不用碰组件。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user