perf(fonts): 优化字体加载性能并添加子集化脚本

将 TTF 字体转换为更高效的 WOFF2 格式,添加字体子集化脚本以减小文件大小
优化字体预加载和显示策略,改进无障碍标签
This commit is contained in:
张翔
2026-04-12 13:52:54 +08:00
parent b150ad346b
commit 2c01752017
7 changed files with 3940 additions and 8 deletions
+10 -5
View File
@@ -2,12 +2,12 @@
@font-face {
font-family: 'Aoyagi Reisho';
src: url('/fonts/AoyagiReisho.ttf') format('truetype');
src: url('/fonts/AoyagiReisho.woff2') format('woff2'),
url('/fonts/AoyagiReisho.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
font-display: swap;
font-stretch: normal;
unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+F900-FAFF, U+2F800-2FA1F;
}
/* 字体加载优化 - 防止 FOUT */
@@ -23,7 +23,7 @@
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--font-chinese: var(--font-noto-sans-sc);
--font-calligraphy: 'Aoyagi Reisho', var(--font-long-cang), 'Long Cang', var(--font-ma-shan-zheng), 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif;
--font-calligraphy: 'Aoyagi Reisho', 'STKaiti', 'KaiTi', 'ZCOOL XiaoWei', serif;
}
:root {
@@ -179,6 +179,11 @@
h1 {
font-size: var(--font-size-5xl);
font-family: 'Aoyagi Reisho', 'STKaiti', 'KaiTi', 'ZCOOL XiaoWei', serif;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h2 {
@@ -341,7 +346,7 @@
/* 青柳隶书体 - 与 Logo 保持一致 */
.font-calligraphy {
font-family: 'Aoyagi Reisho', var(--font-long-cang), 'Long Cang', var(--font-ma-shan-zheng), 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif !important;
font-family: 'Aoyagi Reisho', 'STKaiti', 'KaiTi', 'ZCOOL XiaoWei', serif !important;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+2 -2
View File
@@ -130,9 +130,9 @@ export default function RootLayout({
{/* 字体预加载优化 */}
<link
rel="preload"
href="/fonts/AoyagiReisho.ttf"
href="/fonts/AoyagiReisho.woff2"
as="font"
type="font/ttf"
type="font/woff2"
crossOrigin="anonymous"
/>
<OrganizationSchema />
+1 -1
View File
@@ -162,7 +162,6 @@ function HeaderContent() {
<Link
href="/"
className="flex items-center group"
aria-label="返回首页"
>
<Image
src="/logo.svg"
@@ -172,6 +171,7 @@ function HeaderContent() {
className="h-8 w-auto transition-transform duration-200 group-hover:scale-105"
priority
/>
<span className="sr-only"></span>
</Link>
<nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航" data-testid="desktop-navigation">