字体优化

next/font 会自动优化您的字体（包括自定义字体），并移除外部网络请求以提升隐私性和性能。

🎥 观看视频： 了解更多关于使用 next/font 的信息 → YouTube (6分钟)。

next/font 包含内置自动自托管功能，适用于_任何_字体文件。这意味着您可以零布局偏移地最优加载网页字体，这得益于底层使用的 CSS size-adjust 属性。

这个新的字体系统还让您能便捷地使用所有 Google 字体，同时兼顾性能和隐私。CSS 和字体文件会在构建时下载，并与您的其他静态资源一同自托管。浏览器不会向 Google 发送任何请求。

Google 字体

自动自托管任何 Google 字体。字体会被包含在部署中，并从与您部署相同的域名提供服务。浏览器不会向 Google 发送任何请求。

首先从 next/font/google 导入您想使用的字体函数。我们推荐使用可变字体以获得最佳性能和灵活性。

import { Inter } from 'next/font/google'

// 如果加载可变字体，无需指定字重
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

如果无法使用可变字体，您需要指定字重：

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

您可以通过数组指定多个字重和/或样式：

app/layout.js

const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

须知：对于包含多个单词的字体名称，使用下划线 (_)。例如，Roboto Mono 应导入为 Roboto_Mono。

指定子集

Google 字体会自动进行子集化。这会减小字体文件大小并提升性能。您需要定义要预加载哪些子集。如果未指定任何子集且 preload 为 true，将会收到警告。

可以通过将其添加到函数调用来完成：

const inter = Inter({ subsets: ['latin'] })

查看字体 API 参考获取更多信息。

使用多种字体

您可以在应用中导入并使用多种字体。有两种方法可以采用。

第一种方法是创建一个工具函数，导出字体、导入它，并在需要的地方应用其 className。这确保字体仅在渲染时预加载：

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { inter } from './fonts'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

在上面的示例中，Inter 将全局应用，而 Roboto Mono 可以根据需要导入和应用。

或者，您可以创建一个 CSS 变量并将其与您喜欢的 CSS 解决方案一起使用：

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

app/global.css

html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

在上面的示例中，Inter 将全局应用，而任何 <h1> 标签将使用 Roboto Mono 样式。

建议：谨慎使用多种字体，因为每种新字体都是客户端需要下载的额外资源。

本地字体

导入 next/font/local 并指定本地字体文件的 src。我们推荐使用可变字体以获得最佳性能和灵活性。

import localFont from 'next/font/local'

// 字体文件可以放在 `app` 内
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

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',
    },
  ],
})

查看字体 API 参考获取更多信息。

与 Tailwind CSS 一起使用

next/font 可以通过 CSS 变量与 Tailwind CSS 一起使用。

在下面的示例中，我们使用来自 next/font/google 的字体 Inter（您可以使用来自 Google 或本地字体的任何字体）。使用 variable 选项加载字体以定义 CSS 变量名称，并将其分配给 inter。然后，使用 inter.variable 将 CSS 变量添加到您的 HTML 文档中。

import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

最后，将 CSS 变量添加到您的 Tailwind CSS 配置中：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}