10. 字体优化 - next/font概述next/font 是 Next.js 内置的字体优化组件自动优化字体加载避免布局偏移CLS提升性能。支持 Google Fonts、自定义字体和系统字体。维度内容WhatNext.js 内置的字体优化组件Why自动优化字体加载避免布局偏移When使用自定义或 Google Fonts 时Wherelayout.js或组件中导入字体Who需要字体优化的开发者Howconst inter Inter({ subsets: [latin] })1. next/font 基础1.1 Google Fonts// app/layout.js import { Inter, Roboto, Open_Sans } from next/font/google; // 单个字体 const inter Inter({ subsets: [latin], display: swap, }); // 多个字体 const roboto Roboto({ weight: [400, 700], subsets: [latin], display: swap, }); // 使用 export default function RootLayout({ children }) { return ( html langzh-CN className{inter.className} body{children}/body /html ); }1.2 自定义字体// app/layout.js import localFont from next/font/local; const myFont localFont({ src: ./fonts/MyFont.woff2, display: swap, }); // 多个字体文件 const customFont localFont({ src: [ { path: ./fonts/CustomFont-Light.woff2, weight: 300, style: normal, }, { path: ./fonts/CustomFont-Regular.woff2, weight: 400, style: normal, }, { path: ./fonts/CustomFont-Bold.woff2, weight: 700, style: normal, }, ], display: swap, }); export default function RootLayout({ children }) { return ( html langzh-CN className{customFont.className} body{children}/body /html ); }2. 字体配置2.1 字体子集import { Inter } from next/font/google; const inter Inter({ subsets: [latin, latin-ext, cyrillic], // 只加载需要的字符集 });2.2 字体权重import { Roboto } from next/font/google; const roboto Roboto({ weight: [300, 400, 500, 700, 900], subsets: [latin], }); // 使用不同权重 h1 className{roboto.className}标题/h1 // 默认 400 p style{{ fontWeight: 700 }} className{roboto.className}粗体/p2.3 字体变量import { Inter } from next/font/google; const inter Inter({ subsets: [latin], variable: --font-inter, // CSS 变量 }); export default function RootLayout({ children }) { return ( html langzh-CN className{inter.variable} body classNamefont-sans{children}/body /html ); } // globals.css body { font-family: var(--font-inter); } .custom-text { font-family: var(--font-inter); font-weight: 600; }3. 字体加载策略3.1 display 属性const inter Inter({ subsets: [latin], display: swap, // 默认使用后备字体直到自定义字体加载 // display: auto, // 浏览器默认 // display: block, // 等待字体加载最多3秒 // display: fallback, // 短暂等待然后使用后备 // display: optional, // 如果字体加载慢可能永不使用 });3.2 预加载const inter Inter({ subsets: [latin], preload: true, // 默认 true预加载字体 });3.3 禁用自动预加载const inter Inter({ subsets: [latin], preload: false, }); // 手动预加载 link relpreload href/fonts/inter.woff2 asfont typefont/woff2 crossOriginanonymous /4. 完整示例// app/layout.js import { Inter, Roboto_Mono } from next/font/google; import localFont from next/font/local; import ./globals.css; // Google Font const inter Inter({ subsets: [latin, latin-ext], display: swap, variable: --font-inter, }); // 等宽字体 const robotoMono Roboto_Mono({ subsets: [latin], display: swap, variable: --font-mono, }); // 本地字体 const headingFont localFont({ src: [ { path: ./fonts/Heading-Light.woff2, weight: 300, style: normal, }, { path: ./fonts/Heading-Regular.woff2, weight: 400, style: normal, }, { path: ./fonts/Heading-Bold.woff2, weight: 700, style: normal, }, ], variable: --font-heading, display: swap, }); export const metadata { title: 字体优化示例, description: 展示 next/font 的使用, }; export default function RootLayout({ children }) { return ( html langzh-CN className{${inter.variable} ${robotoMono.variable} ${headingFont.variable}} body classNamefont-sans {children} /body /html ); } // app/page.js import { Inter } from next/font/google; const inter Inter({ subsets: [latin] }); export default function HomePage() { return ( div h1 classNametext-4xl font-bold mb-4 字体优化示例 /h1 p classNametext-lg mb-2 这是使用 Inter 字体的正文。 /p code classNamefont-mono text-sm 这是等宽字体 /code /div ); } // app/blog/[slug]/page.js import { notFound } from next/navigation; import { getPost } from /lib/posts; export default async function BlogPostPage({ params }) { const { slug } await params; const post await getPost(slug); if (!post) notFound(); return ( article classNameprose prose-lg mx-auto h1 classNamefont-heading{post.title}/h1 div classNamefont-sans{post.content}/div /article ); }5. 总结核心要点要点说明Google Fonts直接导入自动优化本地字体使用 localFontCSS 变量variable 选项性能自动预加载避免 CLS记忆口诀next/font 字体强Google 本地都能装子集权重可配置变量类名都能用自动优化性能好CLS 问题不再有6. 相关资源Next.js Font 文档Google FontsWeb 字体优化