回滚字体改动,恢复到 ef72d52 的状态
按站主要求,把字体相关改动整体回退。用 revert 而不是 reset —— 这些提交 已经推送并部署过,保留历史比改写历史安全。 撤销的两个提交: -f56a6ed门面字体改为霞鹜新致宋(LXGW Neo ZhiSong) -e92ee27字体系统重做:脱离 Google Fonts,统一思源黑/宋,门面加霞鹜文楷 回滚后恢复到: - 西文与中文全部来自 Google Fonts (Inter / Noto Sans SC / Playfair Display / Noto Serif SC) - 门面档用鸿蒙 Sans SC(jsdelivr 的 Regular + Semibold) - --font-display-sans 回到 "HarmonyOS Sans SC" - 站点名与首页那句话去掉 font-display-sans - 操作指南里的字体说明表一并删除(缓存那条 FAQ 保留) ⚠️ 一并回来的已知问题 --font-mono 又变回 "Geist Mono", "Geist Mono Fallback" —— 这两个名字既没有 @font-face 也没装在机器上,font-mono 的回退链是断的,浏览器会退回默认字体 (不是等宽)。全站几十处 font-mono(时间线日期、偶得时间戳、内联代码…)受影响。 这是回滚的既定代价;要单独修的话就是一行。 验证:四个字体文件(BaseLayout / global.css / hero.tsx / site-header.astro) 与ef72d52逐字一致(git diff 为空),文档也一致。
This commit is contained in:
@@ -299,40 +299,6 @@ sudo sysctl fs.inotify.max_user_watches=524288
|
|||||||
|
|
||||||
如果连空态提示都看不到,检查 `src/data/reading.json` 是否存在(这个文件要提交进 git)。
|
如果连空态提示都看不到,检查 `src/data/reading.json` 是否存在(这个文件要提交进 git)。
|
||||||
|
|
||||||
**想换字体 / 字体是从哪加载的**
|
|
||||||
|
|
||||||
全部由 `src/layouts/BaseLayout.astro` 顶部的 `fontStylesheets` 数组决定,
|
|
||||||
走 jsdelivr 上的 Fontsource 包(**不用 Google Fonts**,国内访问不稳):
|
|
||||||
|
|
||||||
| 层级 | 字体 | 用在哪 |
|
|
||||||
|---|---|---|
|
|
||||||
| 门面整体(宋)| 霞鹜新致宋 `LXGW Neo ZhiSong` | 门面档全部文字(站点名、首页那句话、卡片标题、UI)|
|
|
||||||
| 标题(宋)| 思源宋体 `Noto Serif SC Variable` | 文章页标题、页面标题 |
|
|
||||||
| 正文/UI(黑)| 思源黑体 `Noto Sans SC Variable` | 文章正文、界面、按钮 |
|
|
||||||
| 西文 | `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 里。
|
|
||||||
改字体只需动这两处,不用碰组件。
|
|
||||||
|
|
||||||
两个要点:
|
|
||||||
|
|
||||||
- **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 插件却不生效**
|
**改了 markdown 插件却不生效**
|
||||||
|
|
||||||
Astro 会把渲染好的文章缓存到 `node_modules/.astro`,而这个缓存**只按 markdown
|
Astro 会把渲染好的文章缓存到 `node_modules/.astro`,而这个缓存**只按 markdown
|
||||||
|
|||||||
@@ -175,7 +175,7 @@ export function Hero() {
|
|||||||
*/}
|
*/}
|
||||||
<div className="hero-quote">
|
<div className="hero-quote">
|
||||||
<h1
|
<h1
|
||||||
className={`hero-typewriter font-display-sans ${HERO_SIZE_CLASSES} font-bold tracking-tight text-foreground leading-[1.15] min-h-[1.2em] whitespace-nowrap`}
|
className={`hero-typewriter font-sans ${HERO_SIZE_CLASSES} font-bold tracking-tight text-foreground leading-[1.15] min-h-[1.2em] whitespace-nowrap`}
|
||||||
>
|
>
|
||||||
{renderText()}
|
{renderText()}
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ const isCurrent = (href: string) =>
|
|||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span class="font-display-sans text-foreground font-medium tracking-tight hidden sm:block">{site.name}</span>
|
<span class="text-foreground font-medium tracking-tight hidden sm:block">{site.name}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{/* 字号只在 lg 以上放大:768–1023 这段页眉本来就挤(导航 + 搜索框 + 主题按钮
|
{/* 字号只在 lg 以上放大:768–1023 这段页眉本来就挤(导航 + 搜索框 + 主题按钮
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"updatedAt": "2026-09-17T11:44:18.544Z",
|
"updatedAt": "2026-09-17T10:36:53.871Z",
|
||||||
"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-17T11:43:28.000Z",
|
"lastReadAt": "2026-09-16T15:43:49.000Z",
|
||||||
"startedAt": "2026-09-04T16:07:07.000Z",
|
"startedAt": "2026-09-04T16:07:07.000Z",
|
||||||
"finishedAt": null,
|
"finishedAt": null,
|
||||||
"readingSeconds": 4678,
|
"readingSeconds": 4673,
|
||||||
"deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db"
|
"deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -41,40 +41,7 @@ const {
|
|||||||
fontProfile = "reading",
|
fontProfile = "reading",
|
||||||
} = Astro.props as Props
|
} = Astro.props as Props
|
||||||
|
|
||||||
/** 门面档(首页、书架、专题、相册…)额外加载霞鹜文楷做点睛;文章页不需要 */
|
const useHarmonySans = fontProfile === "interface"
|
||||||
const isInterfaceProfile = fontProfile === "interface"
|
|
||||||
|
|
||||||
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。
|
|
||||||
*
|
|
||||||
* - 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`,
|
|
||||||
/*
|
|
||||||
* 门面点睛:霞鹜新致宋(LXGW Neo ZhiSong)。
|
|
||||||
*
|
|
||||||
* 它只有 ZeoSeven 有带 unicode-range 分包的版本 —— jsdelivr 上那个
|
|
||||||
* 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
|
||||||
const resolvedOgDescription = ogDescription || description
|
const resolvedOgDescription = ogDescription || description
|
||||||
@@ -103,11 +70,27 @@ const resolvedTwitterDescription = twitterDescription || description
|
|||||||
<meta name="twitter:description" content={resolvedTwitterDescription} />
|
<meta name="twitter:description" content={resolvedTwitterDescription} />
|
||||||
<slot name="head" />
|
<slot name="head" />
|
||||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
||||||
{/* 字体全部走 jsdelivr 上的 Fontsource:CJK 用可变字体 + unicode-range 分包,
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
不再依赖 Google Fonts(国内访问不稳)。清单见上方 fontStylesheets。 */}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
{useHarmonySans ? <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin /> : null}
|
||||||
{isInterfaceProfile ? <link rel="preconnect" href={ZEO_SEVEN_CDN} crossorigin /> : null}
|
{useHarmonySans ? (
|
||||||
{fontStylesheets.map((href) => <link rel="stylesheet" href={href} />)}
|
<>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/harmonyos-sans-sc-webfont-splitted@1.1.0/dist/Regular.css"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/harmonyos-sans-sc-webfont-splitted@1.1.0/dist/Semibold.css"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href={useHarmonySans
|
||||||
|
? "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Noto+Serif+SC:wght@400..900&display=swap"
|
||||||
|
: "https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Noto+Sans+SC:wght@400..700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Noto+Serif+SC:wght@400..900&display=swap"}
|
||||||
|
/>
|
||||||
<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)" />
|
||||||
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
||||||
@@ -229,7 +212,7 @@ const resolvedTwitterDescription = twitterDescription || description
|
|||||||
</script>
|
</script>
|
||||||
<ClientRouter />
|
<ClientRouter />
|
||||||
</head>
|
</head>
|
||||||
<body class:list={["bg-background text-foreground", { "font-profile-interface": isInterfaceProfile }]}>
|
<body class:list={["bg-background text-foreground", { "font-profile-interface": useHarmonySans }]}>
|
||||||
<slot />
|
<slot />
|
||||||
<ImageLightbox />
|
<ImageLightbox />
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
|
|||||||
+6
-27
@@ -163,24 +163,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
/*
|
--font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
||||||
* 字体由 BaseLayout.astro 的 fontStylesheets 从 jsdelivr(Fontsource)加载,
|
--font-display-sans: "HarmonyOS Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
* 不再用 Google Fonts。CJK 都是可变字体,一份文件覆盖 100–900 全字重。
|
--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;
|
||||||
* 层次:楷(门面点睛)> 宋(标题)> 黑(正文/UI)
|
|
||||||
*/
|
|
||||||
--font-sans: "Inter Variable", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", system-ui, 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-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;
|
||||||
/*
|
--font-mono: "Geist Mono", "Geist Mono Fallback";
|
||||||
* 原来只写了 "Geist Mono", "Geist Mono Fallback" —— 这两个名字既没有 @font-face
|
|
||||||
* 也没装在机器上,等于把 font-mono 的回退链断掉了,浏览器只能退回默认字体(不是等宽)。
|
|
||||||
* 全站几十处 font-mono(时间线日期、偶得时间戳、内联代码…)都受影响。
|
|
||||||
*/
|
|
||||||
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
--color-surface-subtle: var(--surface-subtle);
|
--color-surface-subtle: var(--surface-subtle);
|
||||||
@@ -257,18 +245,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* 门面档整体改用霞鹜新致宋(宋体)。
|
|
||||||
*
|
|
||||||
* 文章页不受影响,仍是思源黑体 —— 宋体在长正文里不如黑体好读。
|
|
||||||
* 新致宋只有 400 一个字重,所以门面里的 font-medium / font-semibold / font-bold
|
|
||||||
* 都由浏览器合成加粗;如果看起来发糊,把那几处的字重去掉改成常规字重即可。
|
|
||||||
*
|
|
||||||
* 字形上它衍生于 IPAmj 明朝,笔画比思源宋体更瘦、更「印刷」,配纸纹底很搭。
|
|
||||||
*/
|
|
||||||
body.font-profile-interface,
|
body.font-profile-interface,
|
||||||
body.font-profile-interface .font-sans {
|
body.font-profile-interface .font-sans {
|
||||||
font-family: "LXGW Neo ZhiSong", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom smooth scrolling (avoid hash navigation animation) */
|
/* Custom smooth scrolling (avoid hash navigation animation) */
|
||||||
|
|||||||
Reference in New Issue
Block a user