门面字体改为霞鹜新致宋(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:
dsh
2026-09-17 19:44:21 +08:00
parent e92ee27818
commit f56a6eda11
4 changed files with 42 additions and 16 deletions
+12 -2
View File
@@ -306,11 +306,21 @@ sudo sysctl fs.inotify.max_user_watches=524288
| 层级 | 字体 | 用在哪 | | 层级 | 字体 | 用在哪 |
|---|---|---| |---|---|---|
| 门面点睛(楷)| 霞鹜文楷 `LXGW WenKai` | 站点名、首页那句话、卡片标题 | | 门面整体(宋)| 霞鹜新致宋 `LXGW Neo ZhiSong` | 门面档全部文字(站点名、首页那句话、卡片标题、UI)|
| 标题(宋)| 思源宋体 `Noto Serif SC Variable` | 文章标题、页面标题 | | 标题(宋)| 思源宋体 `Noto Serif SC Variable` | 文章页标题、页面标题 |
| 正文/UI(黑)| 思源黑体 `Noto Sans SC Variable` | 文章正文、界面、按钮 | | 正文/UI(黑)| 思源黑体 `Noto Sans SC Variable` | 文章正文、界面、按钮 |
| 西文 | `Inter Variable` + `Playfair Display` | 西文与数字、展示衬线 | | 西文 | `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 里。 字族名的对应关系写在 `src/styles/global.css` 的 `--font-*` token 里。
改字体只需动这两处,不用碰组件。 改字体只需动这两处,不用碰组件。
+3 -3
View File
@@ -1,5 +1,5 @@
{ {
"updatedAt": "2026-09-17T11:35:09.881Z", "updatedAt": "2026-09-17T11:44:18.544Z",
"source": "weread", "source": "weread",
"books": [ "books": [
{ {
@@ -10,10 +10,10 @@
"cover": "https://wfqqreader-1252317822.image.myqcloud.com/cover/299/26678299/t6_26678299.jpg", "cover": "https://wfqqreader-1252317822.image.myqcloud.com/cover/299/26678299/t6_26678299.jpg",
"progress": 35, "progress": 35,
"finished": false, "finished": false,
"lastReadAt": "2026-09-16T15:43:49.000Z", "lastReadAt": "2026-09-17T11:43:28.000Z",
"startedAt": "2026-09-04T16:07:07.000Z", "startedAt": "2026-09-04T16:07:07.000Z",
"finishedAt": null, "finishedAt": null,
"readingSeconds": 4673, "readingSeconds": 4678,
"deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db" "deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db"
}, },
{ {
+12 -7
View File
@@ -45,6 +45,9 @@ const {
const isInterfaceProfile = fontProfile === "interface" const isInterfaceProfile = fontProfile === "interface"
const FONTSOURCE_CDN = "https://cdn.jsdelivr.net/npm" 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。 * 字体清单。全部走 jsdelivr 上的 Fontsource 包,不再依赖 Google Fonts。
@@ -63,13 +66,14 @@ const fontStylesheets = [
// 中文黑体(正文/UI)与宋体(标题) // 中文黑体(正文/UI)与宋体(标题)
`${FONTSOURCE_CDN}/@fontsource-variable/noto-sans-sc@5/index.css`, `${FONTSOURCE_CDN}/@fontsource-variable/noto-sans-sc@5/index.css`,
`${FONTSOURCE_CDN}/@fontsource-variable/noto-serif-sc@5/index.css`, `${FONTSOURCE_CDN}/@fontsource-variable/noto-serif-sc@5/index.css`,
// 门面点睛:霞鹜文楷(regular + bold) /*
...(isInterfaceProfile * 门面点睛:霞鹜新致宋(LXGW Neo ZhiSong)。
? [ *
`${FONTSOURCE_CDN}/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-regular.css`, * 它只有 ZeoSeven 有带 unicode-range 分包的版本 —— jsdelivr 上那个
`${FONTSOURCE_CDN}/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-bold.css`, * lxgw-neo-zhisong-webfont 是**单文件 4.45 MB、无分包**,每次全量下载,不能用。
] * ZeoSeven 把字体切成 145 个 unicode-range 分包,浏览器只下页面用到的那几个。
: []), */
...(isInterfaceProfile ? [ZHI_SONG_CSS] : []),
] ]
const canonicalUrl = canonical || Astro.url.toString() const canonicalUrl = canonical || Astro.url.toString()
const resolvedOgTitle = ogTitle || title const resolvedOgTitle = ogTitle || title
@@ -102,6 +106,7 @@ const resolvedTwitterDescription = twitterDescription || description
{/* 字体全部走 jsdelivr 上的 Fontsource:CJK 用可变字体 + unicode-range 分包, {/* 字体全部走 jsdelivr 上的 Fontsource:CJK 用可变字体 + unicode-range 分包,
不再依赖 Google Fonts(国内访问不稳)。清单见上方 fontStylesheets。 */} 不再依赖 Google Fonts(国内访问不稳)。清单见上方 fontStylesheets。 */}
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin /> <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
{isInterfaceProfile ? <link rel="preconnect" href={ZEO_SEVEN_CDN} crossorigin /> : null}
{fontStylesheets.map((href) => <link rel="stylesheet" href={href} />)} {fontStylesheets.map((href) => <link rel="stylesheet" href={href} />)}
<link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)" /> <link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)" /> <link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)" />
+15 -4
View File
@@ -170,8 +170,8 @@
* 层次:楷(门面点睛)> 宋(标题)> 黑(正文/UI) * 层次:楷(门面点睛)> 宋(标题)> 黑(正文/UI)
*/ */
--font-sans: "Inter Variable", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --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: "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-serif-cn: "Noto Serif SC Variable", "Source Han Serif SC", "Georgia", serif;
--font-display-serif: "Playfair Display", "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) */ /* Custom smooth scrolling (avoid hash navigation animation) */
html { html {