gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化字体加载性能和字间距

Browse Source 
- 添加 adjustFontFallback: false 优化 CLS（累积布局偏移）
- 调整霞鹜文楷字间距：从负值改为正值，让手写风格字体更自然
  - h1: -0.03em → 0.01em
  - h2: -0.02em → 0.015em
  - type-display: 添加 0.01em
  - type-title: 0.02em → 0.025em
- 改善字体加载时的视觉稳定性

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
gbanyan
2026-02-13 16:08:26 +08:00
parent a9bd56b658
commit 62090c7742
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/layout.tsx
View File

@@ -18,6 +18,7 @@ const lxgwWenKai = LXGW_WenKai_TC({
variable: '--font-serif-cn', variable: '--font-serif-cn',
display: 'swap', display: 'swap',
preload: true, preload: true,
adjustFontFallback: false, // 中文字体不需要 fallback 调整，使用系统字体作为 fallback
}); });
export const metadata: Metadata = { export const metadata: Metadata = {

13
styles/globals.css
View File

@@ -219,7 +219,7 @@ body {
line-height: 1.25; line-height: 1.25;
color: var(--color-ink-strong); color: var(--color-ink-strong);
font-weight: 700; font-weight: 700;
letter-spacing: -0.03em; letter-spacing: 0.01em; /* 手写风格字体需要稍微增加字间距 */
font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif; font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif;
} }
@@ -228,7 +228,7 @@ body {
line-height: 1.3; line-height: 1.3;
color: var(--color-ink-strong); color: var(--color-ink-strong);
font-weight: 600; font-weight: 600;
letter-spacing: -0.02em; letter-spacing: 0.015em; /* 手写风格字体需要稍微增加字间距 */
font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif; font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif;
} }
@@ -410,6 +410,7 @@ body {
line-height: 1.2; line-height: 1.2;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif; font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif;
letter-spacing: 0.01em; /* 手写风格字体需要稍微增加字间距 */
} }
.type-title { .type-title {
@@ -417,7 +418,7 @@ body {
line-height: 1.3; line-height: 1.3;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif; font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif;
letter-spacing: 0.02em; letter-spacing: 0.025em; /* 手写风格字体需要稍微增加字间距 */
} }
.type-subtitle { .type-subtitle {
@@ -425,7 +426,7 @@ body {
line-height: 1.35; line-height: 1.35;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif; font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif;
letter-spacing: 0.02em; letter-spacing: 0.02em; /* 保持原有字间距 */
} }
.type-body { .type-body {
@@ -442,13 +443,13 @@ body {
h1 { h1 {
font-weight: 700; font-weight: 700;
letter-spacing: -0.03em; letter-spacing: 0.01em; /* 手写风格字体需要稍微增加字间距 */
font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif; font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif;
} }
h2 { h2 {
font-weight: 600; font-weight: 600;
letter-spacing: -0.02em; letter-spacing: 0.015em; /* 手写风格字体需要稍微增加字间距 */
font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif; font-family: var(--font-serif-cn), var(--font-serif-eng), "Songti SC", serif;
} }