优化 Mermaid 渲染

src/components/Head.astro

@@ -1,8 +1,54 @@
 ---
 import DefaultHead from '@astrojs/starlight/components/Head.astro';
+
+// A 404 is not a translated document. Starlight would otherwise advertise
+// nonexistent /zh-cn/404/ and /en/404/ alternates for this custom page.
+if (Astro.locals.starlightRoute.id === '404' || Astro.response.status === 404) {
+  Astro.locals.starlightRoute.head = Astro.locals.starlightRoute.head.filter(
+    ({ tag, attrs }) => tag !== 'link' || !['canonical', 'alternate'].includes(String(attrs?.rel)),
+  );
+}
+
+/**
+ * Google Fonts CN API, loaded without blocking first paint.
+ *
+ * `font-display=optional` is deliberate: if a webfont is not cached the page
+ * renders immediately with the local fallback stacks in `fonts.generated.css`
+ * and never swaps, so there is no reflow. A slow or blocked fonts.googleapis.cn
+ * therefore costs nothing but the webfont itself.
+ *
+ * `Manrope` is the heading face behind `--sl-font-display` for the site title in
+ * the top-left corner. A variable font, so one request spans 600..800.
+ * `Archivo Black` is the heavy fallback; the title's Greek `Σ` needs a face with
+ * a greek subset, which is why these two were chosen.
+ */
+const WEBFONT_CSS =
+  'https://fonts.googleapis.cn/css2?family=Archivo+Black&family=Manrope:wght@600..800&family=Noto+Sans+SC:wght@400..700&display=optional';
 ---
 
 <DefaultHead />
+
+<!--
+  Warm the connection while the HTML is still parsing. `crossorigin` is required
+  for the font file host because fonts are fetched in CORS mode.
+-->
+<link rel="preconnect" href="https://fonts.googleapis.cn" />
+<link rel="preconnect" href="https://fonts.gstatic.cn" crossorigin />
+
+<!--
+  Non-blocking stylesheet load: `media=print` keeps it off the critical path,
+  and the `onload` handler promotes it to `all`. The inline `onerror` prevents
+  it from staying in print mode if the request fails. Without JS the webfont is
+  skipped entirely and the local stack is used.
+-->
+<link
+  rel="stylesheet"
+  href={WEBFONT_CSS}
+  media="print"
+  onload="this.media='all'"
+  onerror="this.media='all'"
+/>
+
 <script>
   import '../scripts/mermaid';
 </script>