概览`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 明显降低；首屏可读性与加载稳定性提升
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复