如何使用字体
next/font 模块会自动优化你的字体，并移除外部网络请求以提升隐私保护和性能。
它为任何字体文件提供内置的自托管功能。这意味着你可以无布局偏移地最优加载 Web 字体。
要开始使用 next/font，从 next/font/local 或 next/font/google 导入它，使用适当的选项作为函数调用，并将 className 设置到你想要应用字体的元素上。例如：
app/layout.tsx
TypeScript
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}字体的作用域限定在使用它们的组件内。要将字体应用到整个应用程序，请将其添加到 Root Layout。
Google 字体
你可以自动自托管任何 Google 字体。字体会作为静态资源存储，并从与你的部署相同的域名提供服务，这意味着当用户访问你的网站时，浏览器不会向 Google 发送任何请求。
要开始使用 Google 字体，从 next/font/google 导入你选择的字体：
app/layout.tsx
TypeScript
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}我们建议使用可变字体以获得最佳性能和灵活性。但如果你无法使用可变字体，则需要指定字重：
app/layout.tsx
TypeScript
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}本地字体
要使用本地字体，从 next/font/local 导入你的字体，并指定本地字体文件的 src。字体可以存储在 public 文件夹中，或与 app 文件夹放在一起。例如：
app/layout.tsx
TypeScript
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}如果你想为单个字体系列使用多个文件，src 可以是一个数组：
const roboto = localFont({
src: [
{
path: './Roboto-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Roboto-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Roboto-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Roboto-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
],
})