Next.js 字体优化全指南：如何使用 next/font 提升应用性能与体验

2026-02-02 02:31:01 0条评论 1次阅读 0人点赞

作为一名前端开发者，我们都知道字体是网页设计的灵魂。但是，你是否想过，我们在引入这些漂亮字体时，实际上正在给我们的 Web 应用增加沉重的负担？

在传统的 Web 开发中，为了使用 Google Fonts 或其他自定义字体，我们通常会引入一个外部样式表（CSS），或者在 CSS 文件中使用 @font-face。这种方法虽然简单，但存在一个巨大的性能瓶颈：每一个字体的加载都可能引发浏览器重新渲染，导致页面布局发生偏移。你肯定见过这样的情况——页面加载时文字先显示为默认字体，然后突然“闪烁”变成了另一种字体。这就是所谓的“布局偏移”，它不仅影响视觉体验，还会降低你的 Google Lighthouse 性能评分。

别担心，Next.js 为我们提供了一个完美的解决方案：next/font。在这篇文章中，我们将深入探讨如何利用这个强大的模块来优化我们的字体加载策略。

在这篇文章中，你将学到：

为什么 next/font 是处理字体的最佳方式。
如何在 Next.js 中集成 Google Fonts 和本地字体。
如何避免布局偏移并提升 Core Web Vitals 指标。
实战代码示例和项目结构演示。
针对不同场景的字体配置技巧。

让我们开始这段字体优化之旅吧！

0.1 为什么选择 next/font？
0.2 准备工作
0.3 方法：在 Next.js 中使用 Google Fonts
0.4 深入代码：实现 Google Fonts

1 React Tutorial
- 1.1 进阶技巧：多字体与局部字体
2 This text uses our local font!
- 2.1 常见问题与调试技巧
- 2.2 总结与关键要点

为什么选择 next/font？

在 Next.js 之前，优化字体加载通常需要复杂的 CSS 技巧或 JavaScript 库。我们需要处理字体子集化、预加载以及消除不可见文本闪烁（FOIT）和样式无内容闪烁（FOUT）等问题。

Next.js 13.4 版本中引入的 INLINECODE84d88998（在 App Router 中是 INLINECODEb0c433c6，在旧文档中可能被称为 @next/font）彻底改变了这一现状。它为我们提供了以下核心优势：

1. 自动托管与零布局偏移

最酷的功能是什么？自动自托管。当我们使用 next/font 加载 Google Fonts 时，Next.js 不会从 Google 的服务器获取字体文件。相反，它会在构建时自动下载字体文件并将其与你的其他静态资源一起托管。

这意味着：

隐私性提升：无需向 Google 发送请求。
性能提升：减少了外部 HTTP 请求，利用浏览器缓存策略。
零布局偏移：next/font 会自动计算字体样式，并在字体加载完成前使用占位符，确保字体加载后页面布局不会发生跳动。这直接有助于提升 Cumulative Layout Shift (CLS) 指标。

2. 内置的 CSS 变量

next/font 会自动构建一个优化的 CSS 字体脸声明，并将其注入到页面头部。它通过 CSS 变量来管理字体家族，这使得我们在 Tailwind CSS 或 CSS Modules 中使用字体变得异常简单。

准备工作

在开始编码之前，请确保你已经安装了 Node.js 环境，并且对 React 和 Next.js 的基本概念（如组件和 JSX）有所了解。我们将使用最新的 App Router 架构来进行演示。

方法：在 Next.js 中使用 Google Fonts

我们将以 Google Fonts 为例，展示如何快速集成字体。Next.js 提供了专门的辅助函数来处理这一过程，无需任何外部配置。

1. 语法概览

使用 INLINECODE0ba81678 的基本语法非常直观。我们从 INLINECODE4b5c7062 导入特定的字体函数，调用它以获取一个字体对象，然后将该对象的 className 添加到我们的 HTML 元素中。

// 导入所需的字体函数
import { Roboto } from ‘next/font/google‘

// 配置字体选项
const roboto = Roboto({
  weight: ‘400‘, // 设置字重
  subsets: [‘latin‘], // 设置子集
})

export default function RootLayout({ children }) {
  return (
    
      
        {children}
      
    
  )
}

2. 完整实战步骤

让我们通过一个完整的项目来演示。我们将创建一个新的 Next.js 应用，并将其配置为使用“Rochester”字体。

步骤 1：创建应用程序

首先，打开你的终端，运行以下命令来创建一个新的 Next.js 项目。我们将它命名为 Demo-App。

npx create-next-app@latest Demo-App

步骤 2：配置项目

在创建过程中，终端会提示你进行一系列配置。建议如下：

Would you like to use TypeScript? Yes (推荐)
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes (方便演示样式)
Would you like to use src/ directory? Yes (现代项目结构)
App Router? Yes (默认)
Customize the default import alias? No

!创建项目的步骤

步骤 3：理解项目结构

虽然我们不需要手动安装 INLINECODEe232232e（它已内置于 Next.js 核心中），但了解文件结构至关重要。如果你的项目使用 INLINECODE6b8b3467 目录，你的主要布局文件通常位于 INLINECODE5a8d9fed（或 INLINECODE18c68e55）。

!项目结构

步骤 4：启动开发服务器

进入项目目录并启动服务器：

cd Demo-App
npm run dev

现在，让我们开始编写代码。

深入代码：实现 Google Fonts

在这个示例中，我们将配置应用全局使用 Rochester 字体。

第一步：配置 layout.js

这是最关键的一步。我们需要修改根布局文件，在这里引入字体并将其应用于标签。这样，整个应用的所有页面都会默认继承这个字体。

// src/app/layout.js

// 1. 从 next/font/google 导入你想要的字体
// 注意：字体名称通常对应 Google Fonts 上的名称，但采用驼峰命名法
import { Rochester } from ‘next/font/google‘
import ‘./globals.css‘

// 2. 调用字体函数进行配置
const rock = Rochester({ 
  subsets: [‘latin‘], // 指定字符集，通常 latin 包含了英语字符
  weight: ‘400‘,      // 指定字重，Rochester 只有 400
  // display: ‘swap‘, // 可选：控制字体加载策略，默认为自动优化
})

// 3. 定义元数据
export const metadata = {
  title: ‘Create Next App‘,
  description: ‘Generated by create next app‘
}

// 4. 导出根布局组件
export default function RootLayout({ children }) {
  return (
    
      {/* 5. 将配置后的字体对象的 className 添加到 body 标签 */}
      {/* 这是应用字体的关键步骤 */}
      
        {children}
      
    
  )
}

代码解析：

INLINECODE3529a4a2: 这告诉 Next.js 只下载拉丁字符集。这能显著减小字体文件大小。如果你需要支持中文或西里尔字母，你需要添加相应的子集，例如 INLINECODE1cf98473 或 latin-ext。
INLINECODEf274ab2a: INLINECODE30f46ef9 生成的对象包含一个特殊的 INLINECODEcc212a9f。这个类名实际上包含了 CSS 变量的引用（例如 INLINECODE07a314a0）。通过将它添加到，我们使其成为全局默认字体。

第二步：构建页面内容

现在，让我们修改主页面，看看字体的实际效果。我们将添加一些文本和列表。

// src/app/page.js
import styles from ‘./page.module.css‘

export default function Home() {
  return (
    
      React Tutorial
      
        React is one of the most popular, efficient, and powerful open-source
        JavaScript library for building dynamic and interactive user interfaces.
        Whether you are a beginner or an experienced developer, mastering fonts
        in Next.js will significantly enhance your user experience.
      

      ReactJS Advantages
      
        
          Composable: We can divide complex UIs into small,
          reusable components. Just like we modularize code, we can also
          modularize styles and fonts.
        
        
          Declarative: Next.js allows us to build Declarative
          views. The font configuration is no exception — it is explicit and
          easy to read.
        
        
          Performance: By using next/font, we eliminate
          external network requests for fonts, improving the Time to First Byte (TTFB)
          and rendering speed.
        
      
    
  )
}

第三步：添加样式

为了配合 Rochester 字体（这是一种装饰性字体），我们可以稍微调整一下全局样式和页面模块样式。

/* src/app/globals.css */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  /* 基础行高优化 */
  line-height: 1.5;
}

li {
  padding: 0.5rem;
  /* 列表项稍微加粗，以配合标题字体 */
  list-style: circle;
  margin-left: 20px;
}

/* src/app/page.module.css */

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6rem;
  min-height: 100vh;
}

h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
  /* 注意：这里的颜色会继承 body 上定义的 Rochester 字体 */
}

p {
  max-width: 70ch;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

h3 {
  margin-top: 2rem;
  font-size: 2rem;
}

结果验证

现在，当你刷新浏览器时，你会看到“React Tutorial”标题和内容都以 Rochester 字体呈现。更重要的是，如果你打开浏览器的开发者工具并观察网络请求，你会发现并没有对 fonts.googleapis.com 的请求。字体文件是从你本地的 Next.js 服务器加载的！

进阶技巧：多字体与局部字体

在实际开发中，我们不仅仅需要一个全局字体。我们可能需要在标题中使用一种字体，在正文中使用另一种字体，或者使用本地的自定义字体文件。

场景 1：混合使用多种字体

我们可以通过多次调用字体函数并在不同的 HTML 元素上应用它们来实现这一点。

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

// Inter 用于正文
const inter = Inter({ subsets: [‘latin‘] })

// Roboto Mono 用于代码块或特定强调
const mono = Roboto_Mono({ subsets: [‘latin‘] })

export default function Layout({ children }) {
  return (
    
      
        {children}
        {/* 在特定部分应用等宽字体 */}
        console.log(‘Hello World‘)
      
    
  )
}

场景 2：使用本地字体文件

如果你购买了商业字体许可证，或者有自定义的 INLINECODE4d5d2fc0 或 INLINECODE245872f5 文件，你可以使用 next/font/local。这是 Web 开发中非常常见的需求。

假设你的字体文件位于 styles/fonts/my-custom-font.ttf。

import localFont from ‘next/font/local‘

// 配置本地字体
const myFont = localFont({
  src: ‘./my-custom-font.ttf‘, // 相对于存放此 JS 文件的路径
  display: ‘swap‘,
})

export default function Page() {
  return (
    
      This text uses our local font!
    
  )
}

场景 3：与 Tailwind CSS 集成

如果你使用 Tailwind CSS（Next.js 项目中非常流行），你可以直接将 next/font 生成的 CSS 变量名添加到你的 Tailwind 配置中。

在 layout.js 中定义字体并导出变量名：

const inter = Inter({
  subsets: [‘latin‘],
  variable: ‘--font-inter‘, // 显式定义 CSS 变量名
})

在 tailwind.config.js 中扩展配置：

/** @type {import(‘tailwindcss‘).Config} */
module.exports = {
  content: [
    ‘./src/pages/**/*.{js,ts,jsx,tsx,mdx}‘,
    ‘./src/components/**/*.{js,ts,jsx,tsx,mdx}‘,
    ‘./src/app/**/*.{js,ts,jsx,tsx,mdx}‘,
  ],
  theme: {
    extend: {
      fontFamily: {
        // 在这里使用我们定义的变量
        sans: [‘var(--font-inter)‘, ‘sans-serif‘],
      },
    },
  },
  plugins: [],
}

现在，你可以在任何组件中使用 INLINECODE700114ff，它将自动应用 INLINECODE4c03195c 字体，并且没有任何布局偏移！

常见问题与调试技巧

Q: 字体显示不出来怎么办？

A: 请检查你的 INLINECODEf1d9ec1f（字重）参数。并不是所有 Google Fonts 都支持所有字重（如 700, 900）。如果你请求了一个不存在的字重，INLINECODE4d9f5b39 可能会回退到默认行为。尝试在 Google Fonts 网站上确认该字体支持的权重。

Q: 如何处理中文字体？

A: 中文字体文件通常很大。使用 INLINECODE54613615 不会包含中文字符。对于中文页面，确保不要使用 INLINECODE5c68ede8 直接加载庞大的中文字体文件（除非它是非常精简的子集）。对于中文，推荐使用 INLINECODE34bc8d1c 加载一个已经过子集化的精简版字体文件，或者利用系统字体（如 INLINECODEecd76093）来获得最佳性能。

总结与关键要点

在这篇文章中，我们深入探讨了如何使用 next/font 来彻底改变我们的字体加载体验。让我们快速回顾一下关键要点：

性能是核心：next/font 通过自托管字体和自动优化 CSS，消除了布局偏移，这是提升 CLS 分数的杀手锏。
简单的 API：无论是 Google Fonts 还是本地字体，配置过程都被简化为导入、配置、应用三个步骤。
灵活性：我们可以轻松地在全局、组件级或与 Tailwind CSS 集成使用。
最佳实践：始终记得显式指定 INLINECODE3f040d80 和 INLINECODE4b399fd5，以确保浏览器只下载它真正需要的数据。

字体虽小，影响巨大。通过采用这些技术，你不仅让你的 Next.js 应用看起来更专业，还能让它跑得更快。下次当你开启一个新项目时，不妨试试这些技巧，感受一下零延迟字体加载带来的丝滑体验吧！

现在，去优化你的应用字体吧！如果在操作过程中遇到任何问题，或者想了解更多关于动态字体加载的技巧，欢迎继续深入探索 Next.js 的官方文档。

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客