Next.js next/font 优化与本地字体策略

引言

• `next/font` 提供内置的字体优化（包含子集化与预加载），并支持本地与第三方字体的统一管理；合理策略可提升首屏与文本渲染稳定性。

能力与配置（已验证）

• 本地与第三方：支持本地字体（`local`）与 Google Fonts 等远程源，自动生成最佳实践的 CSS。来源：Next.js 文档（Fonts）。
• 子集化与预加载：根据使用文本范围进行子集化与预加载；减少传输体积与 FOIT/FOUT。来源：同文档。
• App Router 集成：在布局与页面级配置字体；与 `next/image` 等优化协同。来源：同文档。

实战建议

• 策略组合：为关键页面启用预加载与严格子集；设置系统字体回退以避免闪烁。
• 观测与校验：在 DevTools 与 Speed Insights 中监测 CLS 与字体加载时序；优化缓存与响应头。

参考链接（验证来源）

• Next.js 文档：Fonts 优化（英文）：https://nextjs.org/docs/app/building-your-application/optimizing/fonts

结语

• 借助 `next/font` 的内置优化与本地策略，文本渲染可更快更稳定；建议统一字体策略并持续观测指标。