next/font 是如何优化字体的？

Question

next/font 是如何优化字体的？

Accepted Answer

`next/font` 自动优化 web 字体以提高性能并消除布局移动 — 在构建时自我托管字体，并为您处理加载细节。 ## 使用 Google Font ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## 它自动执行的操作 - **Self-hosting** — 在构建时，Next 下载 Google Font 并从 **您的** 域提供服务。没有运行时对 Google 服务器的请求 → 更快速且更好地保护隐私（没有第三方跟踪）。 - **Zero layout shift** — 它计算备用字体的指标以匹配 web 字体，因此当真实字体交换时，文本不会跳跃（保护 CLS）。 - **Preloading & subsetting** — 预加载字体并仅包含指定的字符子集，减小下载大小。 - **No render-blocking request** — 字体是您构建的一部分，而不是阻止外部获取。 ## 本地字体 ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## 为什么字体优化很重要字体是典型的性能和 CLS 问题：第三方获取会阻止文本渲染，然后在字体加载时导致布局跳跃（FOUT/FOIT）。手动做好这一点需要 `@font-face`、`font-display`、预加载和备用指标匹配。 ## 为什么这很重要 `next/font` 自动化了整个字体性能检查清单 — self-hosting（速度 + 隐私）、subsetting 和 preloading（更小、更快）、以及备用指标匹配（无布局移动）— 这一切都在一个 import 后面。它消除了一个易出错的优化，是在 Next.js 中使用 Google 和本地字体的推荐方式。