05-服务端渲染与元框架——10. 字体优化

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> ); }