Next.js 13+ 字体管理的新范式
在 next.js 13 及更高版本中，随着 app router 的引入，管理外部字体（尤其是 google fonts）的方式发生了显著变化。过去常用的在 _document.js 或 _app.js 中添加 标签，或者在全局 css 文件中使用 @import 规则的方法，可能不再适用或不再是最佳实践。next.js 官方推荐使用内置的 next/font 模块来处理字体，它提供了自动字体优化、零布局偏移（cls）以及更好的性能体验。
next/font 模块会自动下载 Google Fonts 并在构建时进行自托管，从而避免了浏览器对外部资源的额外请求，并消除了布局偏移。它还支持定义 CSS 变量，使得在应用程序的任何地方使用字体变得非常方便。
使用 next/font/google 集成 Google Fonts
以下是在 Next.js 13+ 项目中集成 Google Fonts 的详细步骤。我们将以 Poppins 字体为例。
步骤一：在 app/layout.js 中配置字体
在 Next.js 13 的 App Router 架构中，app/layout.js 文件是应用程序的根布局。我们将在该文件中导入并配置 Google Fonts。
首先，从 next/font/google 导入你需要的字体。例如，要导入 Poppins 字体，你可以这样做：
import { Poppins } from 'next/font/google';
// 配置 Poppins 字体
const poppins = Poppins({
subsets: ['latin'], // 指定字体子集，减少文件大小
display: 'swap', // 控制字体加载行为，'swap' 表示使用系统字体直到自定义字体加载完成
variable: '--font-poppins', // 定义一个 CSS 变量名，方便在 CSS 中引用
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] // 指定需要加载的字重
});
export const metadata = {
title: '您的页面标题',
description: '您的页面描述',
}
export default function RootLayout({ children }) {
return (
// 将字体变量应用到 元素
{children}
)
}配置选项说明：
- subsets: 数组类型，指定需要加载的字符子集。这有助于减小字体文件大小，提高加载速度。例如 ['latin']。
- display: 字符串类型，控制字体加载时的显示行为。
- swap: 字体加载期间使用系统字体，加载完成后替换为自定义字体（推荐，可避免文本不可见，但可能出现布局偏移）。
- optional: 浏览器决定是否使用自定义字体。
- block: 字体加载期间显示空白。
- fallback: 类似于 swap，但有更短的阻塞期。
- variable: 字符串类型，定义一个 CSS 变量名。Next.js 会生成一个包含字体族名称的 CSS 变量，例如 --font-poppins，你可以在 CSS 中使用 var(--font-poppins) 来引用该字体。
- weight: 数组或字符串类型，指定需要加载的字重。例如 ['400', '700'] 或 '400'。如果需要所有字重，可以列出所有。
- style: 数组或字符串类型，指定需要加载的字体样式（如 ['normal', 'italic']）。
步骤二：在 CSS 中使用自定义字体
一旦在 app/layout.js 中配置并应用了字体变量，你就可以在项目中的任何 CSS/SCSS/Tailwind CSS 文件中使用这个 CSS 变量了。
例如，在你的全局 CSS 文件（如 app/globals.css）或任何组件的 CSS 模块中：
/* app/globals.css 或其他 CSS 文件 */
body {
/* 使用定义的 CSS 变量来应用 Poppins 字体 */
font-family: var(--font-poppins), sans-serif;
}
.custom-text {
font-family: var(--font-poppins), serif;
font-weight: 500; /* 可以结合字重使用 */
}这样，body 或 .custom-text 元素将应用 Poppins 字体。
注意事项与最佳实践
性能优势： next/font 模块通过自动自托管和减少网络请求，显著提高了字体加载性能。它还通过内联 CSS 和 font-display: optional 或 swap 来最小化布局偏移。
AGECMS商业会云管理_电子名片下载AGECMS商业会云管理电子名片是一款专为商务人士设计的全方位互动电子名片软件。它结合了现代商务交流的便捷性与高效性，通过数字化的方式，帮助用户快速分享和推广自己的专业形象。此系统集成了多项功能，包括个人信息展示、多媒体互动、客户管理以及社交网络连接等，是商务沟通和品牌推广的得力工具。 核心功能：个人及企业信息展示：用户可以自定义电子名片中的信息内容，包括姓名、职位、企业Logo、联系信息(电话、
子集选择： 务必根据你的项目需求选择合适的 subsets。加载不必要的字符子集会增加字体文件大小，影响加载速度。
字重和样式： 只加载你实际需要的字重和样式。加载过多的字重也会增加字体文件大小。
display 属性： display: 'swap' 是一个很好的默认选择，因为它允许文本在字体加载时立即显示（使用系统字体），避免了“不可见文本闪烁”（FOIT）。
-
多个字体： 如果你需要使用多个 Google Fonts，可以重复上述步骤，为每个字体定义一个不同的 CSS 变量，并在 html> 元素上拼接多个变量。例如：
import { Inter, Poppins } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], variable: '--font-inter' }); const poppins = Poppins({ subsets: ['latin'], variable: '--font-poppins', weight: ['400', '700'] }); export default function RootLayout({ children }) { return ( {children} ) }然后在 CSS 中分别使用 var(--font-inter) 和 var(--font-poppins)。
本地字体： next/font 也支持本地字体。对于本地字体，你需要使用 next/font/local 模块。
总结
Next.js 13+ 引入的 next/font 模块是管理 Google Fonts 的现代化、高性能解决方案。它简化了字体集成过程，并通过自动化优化确保了出色的用户体验。通过遵循本文提供的步骤，你可以轻松地在 Next.js 项目中引入并应用自定义 Google Fonts，同时享受到框架带来的性能优势。告别传统方法，拥抱 next/font，让你的应用程序拥有更快的加载速度和更平滑的视觉呈现。
