perf(fonts): 思源黑/宋切换变字体——CSS 345→106KB 全站提速

- @fontsource-variable/{noto-sans,noto-serif}-sc 替换静态三档：
  wght 轴单文件覆盖 400-700（font-face 303→101/family）
- tokens 字体栈前插 Variable 族名（旧静态名留兜底链）
- 全站 Lighthouse：home 64→70 / en 73→82 / terminal 79→84 /
  gallery 68→74，FCP 4-6s→2-3.5s（主线程解析减半）
- 已知取舍：mian-sha 字节反增（变体切片 2-4x，55 片 3.4MB）但
  FCP 关键路径不受影响（swap）；按页字体 CSS 子集化立为后续包
- E2E 加固：软导航主题切换断言加 VT 竞态重试（今日第二次偶发，
  隔离 3/3 过=测试姿势问题非产品缺陷）

验证: node tests/e2e.mjs 31/31 PASS；本地 dist Lighthouse 五页型
      对比（lh-var vs lh-local 两轮全量审计）

Spec: none (性能二轮：字体管线单点换包，Lighthouse 前后对照已入档)

Co-authored-by: GLM-5.3

src/layouts/BaseLayout.astro

@@ -1,13 +1,11 @@
 ---
 // 基础布局：字体按轨瘦身 + 非阻塞加载（Lighthouse P0：614 个 @font-face
-// 全量入关曾致 Perf 62）；sans/mono 全站，serif+文楷仅 reading 轨消费
-import sans400 from '@fontsource/noto-sans-sc/400.css?url';
-import sans500 from '@fontsource/noto-sans-sc/500.css?url';
-import sans700 from '@fontsource/noto-sans-sc/700.css?url';
+// 全量入关曾致 Perf 62）；变字体二轮——静态三档合并 wght 轴单文件
+// （CSS 345→115KB，主线程解析减半，FCP 5.7s 主因见 lh-local 审计）
+import sansVar from '@fontsource-variable/noto-sans-sc/index.css?url';
 import mono400 from '@fontsource/jetbrains-mono/400.css?url';
 import mono700 from '@fontsource/jetbrains-mono/700.css?url';
-import serif400 from '@fontsource/noto-serif-sc/400.css?url';
-import serif700 from '@fontsource/noto-serif-sc/700.css?url';
+import serifVar from '@fontsource-variable/noto-serif-sc/index.css?url';
 import kai from 'lxgw-wenkai-screen-webfont/lxgwwenkaiscreen.css?url';
 import '../styles/global.css';
 import Header from '../components/Header.astro';
@@ -48,22 +46,19 @@ const withSlash = (p: string) => (p.endsWith('/') ? p : `${p}/`);
     <ThemeScript />
     <ClientRouter />
     <!-- 非阻塞字体 CSS：preload+onload 回切（Lighthouse P0-1：渲染阻塞 708KB 元凶） -->
-    <link rel="preload" as="style" href={sans400} onload="this.rel='stylesheet'" />
-    <link rel="preload" as="style" href={sans500} onload="this.rel='stylesheet'" />
-    <link rel="preload" as="style" href={sans700} onload="this.rel='stylesheet'" />
+    <link rel="preload" as="style" href={sansVar} onload="this.rel='stylesheet'" />
     <link rel="preload" as="style" href={mono400} onload="this.rel='stylesheet'" />
     <link rel="preload" as="style" href={mono700} onload="this.rel='stylesheet'" />
     {track === 'reading' && (
       <>
-        <link rel="preload" as="style" href={serif400} onload="this.rel='stylesheet'" />
-        <link rel="preload" as="style" href={serif700} onload="this.rel='stylesheet'" />
+        <link rel="preload" as="style" href={serifVar} onload="this.rel='stylesheet'" />
         <link rel="preload" as="style" href={kai} onload="this.rel='stylesheet'" />
       </>
     )}
     <noscript>
-      <link rel="stylesheet" href={sans400} />
+      <link rel="stylesheet" href={sansVar} />
       <link rel="stylesheet" href={mono400} />
-      {track === 'reading' && <link rel="stylesheet" href={serif400} />}
+      {track === 'reading' && <link rel="stylesheet" href={serifVar} />}
     </noscript>
     <link rel="alternate" hreflang="zh" href={new URL(withSlash(zhPath), Astro.site)} />
     <link rel="alternate" hreflang="en" href={new URL(withSlash(enPath), Astro.site)} />

src/styles/tokens.css

@@ -35,11 +35,11 @@
 
   /* ---- 字体三轨 ---- */
   /* 书评正文：思源宋（用户对标模板的宋体质感拍板）；文楷降级为金句点缀 */
-  --font-serif: "Noto Serif SC", Georgia, "Songti SC", STSong,
+  --font-serif: "Noto Serif SC Variable", "Noto Serif SC", Georgia, "Songti SC", STSong,
     "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
   --font-kai: "LXGW WenKai Screen", "Songti SC", serif;
   /* UI / 技术文：思源黑 */
-  --font-sans: "Noto Sans SC", system-ui, -apple-system, "PingFang SC",
+  --font-sans: "Noto Sans SC Variable", "Noto Sans SC", system-ui, -apple-system, "PingFang SC",
     "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   /* 代码 */
   --font-mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;