代码字体换成 Maple Mono,并修好断掉的等宽回退链

按站主要求,代码/等宽字体改用 Maple Mono(ZeoSeven 上编号 443,
那边叫 ZSFT-443)。它是一款专为编程设计的开源等宽字体,带连字,
这里用可变字体单文件(normal 114 KB / italic 135 KB)。

改动
- global.css 顶部加两条 @font-face(放在所有 @import 之后),
  指向 https://fontsapi.zeoseven.com/443/{main,italic}.woff2
- 字族名直接叫 "Maple Mono" 而不是 ZeoSeven 的编号 "ZSFT-443" ——
  @font-face 的名字由我们自己定,用真实字体名更好维护
- --font-mono 从 "Geist Mono", "Geist Mono Fallback" 换成
  "Maple Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
  Consolas, "Liberation Mono", monospace

顺带修掉一个真 bug
原来那串只有 "Geist Mono", "Geist Mono Fallback" —— 两个名字既没有
@font-face 也没装在机器上,等于整条回退链是断的,浏览器会退回默认字体
(不是等宽)。受影响的是内联代码(global.css 里那条 var(--font-mono))
和组件里 29 处 font-mono(时间线日期、偶得时间戳、专题元信息、灯箱说明…)。

代码块不用另外改
astro.config.mjs 里 expressive-code 的 codeFontFamily 已经写成
"var(--font-mono), ui-monospace, …",所以改 --font-mono 一处,
代码块、内联代码、组件里那些 font-mono 一起生效。

正文与 Google Fonts 保持不动(站主确认)。

验证:pnpm build 退出码 0
- 产物 CSS 里两条 @font-face 都在,外部 URL 未被 Vite 改写
- --font-mono 已解析为 "Maple Mono", ui-monospace, …
- experssive-code 侧仍引用 var(--font-mono),自动继承
- 字体文件实测可下(main 116712B / italic 137812B)
This commit is contained in:
dsh
2026-09-17 20:00:15 +08:00
parent cfcd24a3f8
commit e174138bbf
2 changed files with 42 additions and 4 deletions
+3 -3
View File
@@ -1,5 +1,5 @@
{
"updatedAt": "2026-09-17T10:36:53.871Z",
"updatedAt": "2026-09-17T12:00:02.913Z",
"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:58:14.000Z",
"startedAt": "2026-09-04T16:07:07.000Z",
"finishedAt": null,
"readingSeconds": 4673,
"readingSeconds": 4908,
"deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db"
},
{
+39 -1
View File
@@ -6,6 +6,33 @@
@custom-variant dark (&:is(.dark *));
/*
* 代码 / 等宽字体:Maple Mono
*
* ZeoSeven 上编号 443(那边把它叫 ZSFT-443),本名 Maple Mono ——
* 一款专为编程设计的开源等宽字体,带连字。这里用的是可变字体单文件
* (main 114 KB / italic 135 KB),只在页面真的用到等宽字体时才会下载,
* 不会每个访客都拉。
*
* 改了字族名:ZeoSeven 那边叫 "ZSFT-443",那是个没信息量的编号,
* 这里直接用真实名字 "Maple Mono"(@font-face 的名字由我们自己定)。
*/
@font-face {
font-family: "Maple Mono";
src: url("https://fontsapi.zeoseven.com/443/main.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: "Maple Mono";
src: url("https://fontsapi.zeoseven.com/443/italic.woff2") format("woff2");
font-style: italic;
font-weight: 100 900;
font-display: swap;
}
:root {
/* Red & White Apple-inspired theme */
/*
@@ -168,7 +195,18 @@
--font-serif: "Noto Serif SC", "Source Han Serif SC", "Playfair Display", "Georgia", serif;
--font-serif-cn: "Noto Serif SC", "Source Han Serif SC", "Georgia", serif;
--font-display-serif: "Playfair Display", "Georgia", serif;
--font-mono: "Geist Mono", "Geist Mono Fallback";
/*
* 代码块 / 内联代码 / 时间戳等所有等宽场景。
*
* 原来只写了 "Geist Mono", "Geist Mono Fallback" —— 这两个名字既没有
* @font-face 也没装在机器上,等于整条回退链是断的,浏览器会退回默认字体
* (不是等宽)。现在换成 Maple Mono,后面接真正的等宽回退。
*
* 代码块那侧不用另外改:astro.config.mjs 里 expressive-code 的
* codeFontFamily 已经写成 "var(--font-mono), ui-monospace, …",
* 所以这里一改,代码块、内联代码、以及组件里那些 font-mono 一起生效。
*/
--font-mono: "Maple Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-surface-subtle: var(--surface-subtle);