diff --git a/docs/操作指南.md b/docs/操作指南.md index 3d50be1..df92f5b 100644 --- a/docs/操作指南.md +++ b/docs/操作指南.md @@ -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 diff --git a/src/components/hero.tsx b/src/components/hero.tsx index 0b2a466..3a7dcd2 100644 --- a/src/components/hero.tsx +++ b/src/components/hero.tsx @@ -175,7 +175,7 @@ export function Hero() { */}

{renderText()}

diff --git a/src/components/site-header.astro b/src/components/site-header.astro index 2bae6cc..53a6ac2 100644 --- a/src/components/site-header.astro +++ b/src/components/site-header.astro @@ -36,7 +36,7 @@ const isCurrent = (href: string) => class="w-full h-full object-cover" />
- + {/* 字号只在 lg 以上放大：768–1023 这段页眉本来就挤（导航 + 搜索框 + 主题按钮 diff --git a/src/data/reading.json b/src/data/reading.json index 6f2d0ee..0104cf9 100644 --- a/src/data/reading.json +++ b/src/data/reading.json @@ -1,5 +1,5 @@ { - "updatedAt": "2026-09-17T10:36:53.871Z", + "updatedAt": "2026-09-17T11:35:09.881Z", "source": "weread", "books": [ { diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index fc722cd..c4faa97 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -41,7 +41,36 @@ const { fontProfile = "reading", } = Astro.props as Props -const useHarmonySans = fontProfile === "interface" +/** 门面档（首页、书架、专题、相册…）额外加载霞鹜文楷做点睛；文章页不需要 */ +const isInterfaceProfile = fontProfile === "interface" + +const FONTSOURCE_CDN = "https://cdn.jsdelivr.net/npm" + +/* + * 字体清单。全部走 jsdelivr 上的 Fontsource 包，不再依赖 Google Fonts。 + * + * - CJK 用**可变字体**：一份 CSS 覆盖 100–900 全字重，不用为 400/500/600/700 + * 各下一份（那样是 4 × 105 KB） + * - 每份 CSS 内含约 100 条带 unicode-range 的 @font-face，浏览器只下载当前 + * 页面实际用到的那几个分包，不是整包 + * - 体积（gzip）：文章页 ≈ 65 KB；门面再加文楷两档 ≈ 127 KB。 + * 原来的 Google Fonts + 鸿蒙方案是 62.5 / 125.5 KB，基本持平 + */ +const fontStylesheets = [ + // 西文：正文与展示衬线 + `${FONTSOURCE_CDN}/@fontsource-variable/inter@5/index.css`, + `${FONTSOURCE_CDN}/@fontsource/playfair-display@5/index.css`, + // 中文黑体（正文/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`, + ] + : []), +] const canonicalUrl = canonical || Astro.url.toString() const resolvedOgTitle = ogTitle || title const resolvedOgDescription = ogDescription || description @@ -70,27 +99,10 @@ const resolvedTwitterDescription = twitterDescription || description - - - {useHarmonySans ? : null} - {useHarmonySans ? ( - <> - - - - ) : null} - + {/* 字体全部走 jsdelivr 上的 Fontsource：CJK 用可变字体 + unicode-range 分包， + 不再依赖 Google Fonts（国内访问不稳）。清单见上方 fontStylesheets。 */} + + {fontStylesheets.map((href) => )} @@ -212,7 +224,7 @@ const resolvedTwitterDescription = twitterDescription || description - +