05-服务端渲染与元框架——10. 字体优化 - next/font
10. 字体优化 - next/font
概述
next/font 是 Next.js 内置的字体优化组件，自动优化字体加载，避免布局偏移（CLS），提升性能。支持 Google Fonts、自定义字体和系统字体。
| 维度 | 内容 |
|---|---|
| What | Next.js 内置的字体优化组件 |
| Why | 自动优化字体加载，避免布局偏移 |
| When | 使用自定义或 Google Fonts 时 |
| Where | layout.js或组件中导入字体 |
| Who | 需要字体优化的开发者 |
| How | const 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 lang="zh-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 lang="zh-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}>粗体</p>2.3 字体变量
import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], variable: '--font-inter', // CSS 变量 }); export default function RootLayout({ children }) { return ( <html lang="zh-CN" className={inter.variable}> <body className="font-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 rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />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 lang="zh-CN" className={`${inter.variable} ${robotoMono.variable} ${headingFont.variable}`} > <body className="font-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 className="text-4xl font-bold mb-4"> 字体优化示例 </h1> <p className="text-lg mb-2"> 这是使用 Inter 字体的正文。 </p> <code className="font-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 className="prose prose-lg mx-auto"> <h1 className="font-heading">{post.title}</h1> <div className="font-sans">{post.content}</div> </article> ); }5. 总结
核心要点
| 要点 | 说明 |
|---|---|
| Google Fonts | 直接导入，自动优化 |
| 本地字体 | 使用 localFont |
| CSS 变量 | variable 选项 |
| 性能 | 自动预加载，避免 CLS |
记忆口诀
next/font 字体强，Google 本地都能装
子集权重可配置，变量类名都能用
自动优化性能好，CLS 问题不再有
6. 相关资源
- Next.js Font 文档
- Google Fonts
- Web 字体优化