概览`next/font` 能无配置地引入 Google 可变字体并在构建时优化，结合 `preload` 与 `font-display` 可减少 FOUT 并稳定排版。将字体度量抽象为令牌可提升工程可维护性。引入可变字体// app/fonts.ts
import { Inter } from 'next/font/google'
export const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
display: 'swap',
preload: true,
})
应用到布局// app/layout.tsx
import { inter } from './fonts'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="zh" className={inter.variable}>
<body>{children}</body>
</html>
)
}
令牌与样式:root { --font-size-0: clamp(1rem, 0.9rem + 0.7vw, 1.25rem); }
body { font-family: var(--font-inter), system-ui, sans-serif; font-size: var(--font-size-0); }
预加载与策略// 可选：为关键字体文件添加 preload（next/font 已自动优化，通常无需手动）
export function HeadFontPreload() {
return (
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
</head>
)
}
治理要点使用 `display: swap` 保持文本可见性；在首屏避免过多字体变体加载。统一字体令牌与排版单位，结合 clamp 与容器查询提升适配。与 unicode-range/size-adjust 协同，减少多语言加载体积。验证与指标浏览器：现代浏览器；Next.js：15.0+；Node.js：20.xFOUT/CLS 明显降低；首屏可读性与加载稳定性提升
发表评论 取消回复