From f56a6eda11970a388f4ad984c97b2a9c4a7bb46a Mon Sep 17 00:00:00 2001 From: dsh Date: Thu, 17 Sep 2026 19:44:21 +0800 Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E9=9D=A2=E5=AD=97=E4=BD=93=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E9=9C=9E=E9=B9=9C=E6=96=B0=E8=87=B4=E5=AE=8B=EF=BC=88?= =?UTF-8?q?LXGW=20Neo=20ZhiSong=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 按站主要求，门面档（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 覆盖规则与思源黑体兜底均在 --- docs/操作指南.md | 14 ++++++++++++-- src/data/reading.json | 6 +++--- src/layouts/BaseLayout.astro | 19 ++++++++++++------- src/styles/global.css | 19 +++++++++++++++---- 4 files changed, 42 insertions(+), 16 deletions(-) diff --git a/docs/操作指南.md b/docs/操作指南.md index df92f5b..ff0938b 100644 --- a/docs/操作指南.md +++ b/docs/操作指南.md @@ -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 里。 改字体只需动这两处，不用碰组件。 diff --git a/src/data/reading.json b/src/data/reading.json index 0104cf9..a3b704c 100644 --- a/src/data/reading.json +++ b/src/data/reading.json @@ -1,5 +1,5 @@ { - "updatedAt": "2026-09-17T11:35:09.881Z", + "updatedAt": "2026-09-17T11:44:18.544Z", "source": "weread", "books": [ { @@ -10,10 +10,10 @@ "cover": "https://wfqqreader-1252317822.image.myqcloud.com/cover/299/26678299/t6_26678299.jpg", "progress": 35, "finished": false, - "lastReadAt": "2026-09-16T15:43:49.000Z", + "lastReadAt": "2026-09-17T11:43:28.000Z", "startedAt": "2026-09-04T16:07:07.000Z", "finishedAt": null, - "readingSeconds": 4673, + "readingSeconds": 4678, "deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db" }, { diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index c4faa97..1b6644f 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -45,6 +45,9 @@ const { const isInterfaceProfile = fontProfile === "interface" const FONTSOURCE_CDN = "https://cdn.jsdelivr.net/npm" +const ZEO_SEVEN_CDN = "https://fontsapi.zeoseven.com" +/** 霞鹜新致宋。145 个 unicode-range 分包，CSS 约 54 KB（gzip） */ +const ZHI_SONG_CSS = `${ZEO_SEVEN_CDN}/22/main/result.css` /* * 字体清单。全部走 jsdelivr 上的 Fontsource 包，不再依赖 Google Fonts。 @@ -63,13 +66,14 @@ const fontStylesheets = [ // 中文黑体（正文/UI）与宋体（标题） `${FONTSOURCE_CDN}/@fontsource-variable/noto-sans-sc@5/index.css`, `${FONTSOURCE_CDN}/@fontsource-variable/noto-serif-sc@5/index.css`, - // 门面点睛：霞鹜文楷（regular + bold） - ...(isInterfaceProfile - ? [ - `${FONTSOURCE_CDN}/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-regular.css`, - `${FONTSOURCE_CDN}/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-bold.css`, - ] - : []), + /* + * 门面点睛：霞鹜新致宋（LXGW Neo ZhiSong）。 + * + * 它只有 ZeoSeven 有带 unicode-range 分包的版本 —— jsdelivr 上那个 + * lxgw-neo-zhisong-webfont 是**单文件 4.45 MB、无分包**，每次全量下载，不能用。 + * ZeoSeven 把字体切成 145 个 unicode-range 分包，浏览器只下页面用到的那几个。 + */ + ...(isInterfaceProfile ? [ZHI_SONG_CSS] : []), ] const canonicalUrl = canonical || Astro.url.toString() const resolvedOgTitle = ogTitle || title @@ -102,6 +106,7 @@ const resolvedTwitterDescription = twitterDescription || description {/* 字体全部走 jsdelivr 上的 Fontsource：CJK 用可变字体 + unicode-range 分包， 不再依赖 Google Fonts（国内访问不稳）。清单见上方 fontStylesheets。 */} + {isInterfaceProfile ? : null} {fontStylesheets.map((href) => )} diff --git a/src/styles/global.css b/src/styles/global.css index acdd76a..4813bda 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -170,8 +170,8 @@ * 层次：楷（门面点睛）> 宋（标题）> 黑（正文/UI） */ --font-sans: "Inter Variable", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; - /* 霞鹜文楷只在门面档加载；文章页没加载它，会自动退回思源黑体，所以它排第二位 */ - --font-display-sans: "LXGW WenKai", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif; + /* 门面点睛字体。霞鹜新致宋只在门面档加载，文章页会自动退回思源黑体，故排第二位 */ + --font-display-sans: "LXGW Neo ZhiSong", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif; --font-serif: "Noto Serif SC Variable", "Source Han Serif SC", "Playfair Display", "Georgia", serif; --font-serif-cn: "Noto Serif SC Variable", "Source Han Serif SC", "Georgia", serif; --font-display-serif: "Playfair Display", "Georgia", serif; @@ -257,8 +257,19 @@ } } -/* 两档现在都用思源黑体，不再需要按档覆盖字族。 - font-profile-interface 这个 class 保留 —— 它现在只决定是否额外加载霞鹜文楷。 */ +/* + * 门面档整体改用霞鹜新致宋（宋体）。 + * + * 文章页不受影响，仍是思源黑体 —— 宋体在长正文里不如黑体好读。 + * 新致宋只有 400 一个字重，所以门面里的 font-medium / font-semibold / font-bold + * 都由浏览器合成加粗；如果看起来发糊，把那几处的字重去掉改成常规字重即可。 + * + * 字形上它衍生于 IPAmj 明朝，笔画比思源宋体更瘦、更「印刷」，配纸纹底很搭。 + */ +body.font-profile-interface, +body.font-profile-interface .font-sans { + font-family: "LXGW Neo ZhiSong", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; +} /* Custom smooth scrolling (avoid hash navigation animation) */ html {