next/font 可变字体与字体优化实践概述`next/font` 提供内置字体管理与自动优化；可变字体（variable）支持在一个文件中承载多个字重/轴，减少请求与提升一致性。可变字体配置import { Inter } from 'next/font/google' export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' }) export default function Layout({ children }: { children: React.ReactNode }) { return <html className={`${inter.variable}`}><body>{children}</body></html> } 变量轴与 CSS 变量:root { --font-weight: 500; } .title { font-family: var(--font-inter), system-ui; font-weight: var(--font-weight); } 字体显示与预加载// next/font 默认优化字体显示（类似 swap） // 额外预加载关键字体（如品牌标题） export default function Head() { return ( <> <link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossOrigin="anonymous" /> </> ) } 技术参数与验证FOIT/FOUT 风险降低；关键文本首屏稳定显示；请求数量减少。注意事项字体许可与来源管理；对不支持可变字体的环境提供回退；与 `Priority Hints`/`preconnect` 协同。---发布信息：已发布 · 技术验证 · 阅读 34 分钟 · CC BY-SA 4.0
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复