在Next.Js 14中添加Google字体的三种方法

在 Next.js 项目中添加 Google Web 字体可以优化性能，因为字体会在构建时绑定，本文将向您展示三种管理方法，以便您的 Web 应用程序实现最高性能。

现在，Next.js 带来了一些令人惊叹的改进/新增功能，使 React 生态系统中的前端工程走上了一条更出色、更注重性能的道路。

Next.js 中还有一个提升性能的功能，那就是 Google 字体的使用方式。

从 Next.js 13 开始，谷歌字体的使用将采用一种不同的方式。这种方法可以提供额外的性能提升，因为（自定义）字体现在会在构建时捆绑到应用程序中。因此，无论何时使用应用程序，都不会请求获取字体。

在本文中，为了与这种在构建时将 Google 字体添加到 Next.js 应用程序的新方法保持一致，我将展示三种将字体添加到下一个 Next.js 项目的不同方法。

我们将安装一个使用 Tailwindcss 引导的 Next.js 应用程序。

安装新的 Next.js 应用（使用 Tailwindcss）

安装 Next.js 应用程序非常简单。请参阅 Next.js 文档中的安装页面，了解详细的安装过程。

只需确保在安装应用程序时使用应用程序路由器即可。安装完成后即可继续。

分析 Next.js 布局文件中的 Google 字体使用情况

应用程序的入口点是新安装的 Next.js 中的 layout.js 文件。因此，正如下面的截图所示，谷歌字体可以导入到该文件中，并应用到包裹应用程序剩余部分的任何可用元素或组件中。

自定义字体是用字体包装应用程序其余部分之前的一个过程。如上截图中第 4 行所示，在最终使用字体之前，我们对字体进行了简单的自定义。

在 Next.js 中使用 Google 字体与我们一直使用的常规方法一样灵活（甚至可能更灵活）。你可以使用多种字体、设置字体权重，还可以进行其他自定义操作，这些我们将在本文的后面部分介绍。

让我们看看使用这种新的构建时间字体使用方法将 Google 字体添加到 Next.js 的三种不同方法。

方法 1：通过 CSS（变量和选择器）在 Next.Js 14 中使用 Google 字体

第一种方法需要使用 CSS 变量和你选择的任何 CSS 选择器。

简单回顾一下变量和选择器

变量是编程语言中的常用术语，但在 CSS 中使用变量（也称为自定义属性）已经有一些年头了。

下面的代码示例展示了如何在 CSS 中创建和使用变量。

:root {
--spacing: 10px;
}
.button {
padding: var (--spacing) var (--spacing * 2);
margin: var (--spacing);
}

另一方面，CSS 选择器是用于在网页中定位 HTML 元素的模式。下面是 CSS 选择器及其类型名称的一些示例。

*Type Selector* or *Element Selector*:
selects HTML elements by their types.
Example: `div` (selects all `div` elements).
*Class Selector*:
selects HTML elements by the `class` names assigned to them.
Example: `.btn` (selects all elements with the `class` attribute value set to `"btn"`).
*ID Selector*:
selects HTML elements by the `id` names assigned to them.
Example: `#header` (selects the element with the `id` attribute value set to `"header"`).

如你所见，这些（CSS 元素和选择器）都是 CSS 的基本概念，但我还是想解释一下，以防你需要复习一下。在本文中，你将需要这些知识。

在布局文件中导入和设置字体

查看上面的截图，你会发现只导入和使用了一种字体。此外，在该截图中，用于添加 Google 字体的方法是默认的 className 方法，我们将在本文稍后部分介绍该方法。

如上面第二张截图所示，我们导入并使用了多种（两种）字体。您还可以在 Next.Js 14 中查看如何导入和使用多种字体。

解释执行过程

首先：从上面第二张截图中可以看出，我们导入了两种字体，并将其附加到不同的变量中，然后进行了如上配置。它们配置了不同的选项，你可以了解并将其添加到你的项目中。

上述截图中最相关的两项配置是变量和字体权重（重量）。

然后：从上面的截图中，我们还可以看到一个 nunito_sans （字体）类是如何附加到作为 children 道具包装器的 main 元素上的。然后，我们需要在 layout.js 文件导入的 CSS 文件中设置该类（以及 poppins 字体的类），如上图第二张截图所示。下面是第三张截图，显示了实现的过程。

注意：请仔细观察 CSS 中调用的字体配置中是如何使用相同变量的。不过请注意，你可以使用任何你想要的选择器模式。(选择器模式已在上文解释）。例如，你可以直接针对 HTML 元素而不是类。

最后：既然我们选择了多种字体，并且只使用了其中一种 – nunito_sans （字体）类，那么现在我们就可以在应用程序中的任意位置使用其他字体，而不会再有任何麻烦。下面是第四张截图的实现情况。

将字体设置提取到不同的字体实用程序文件中

在完成上述所有设置后，我们可以看到，将字体设置提取到一个单独的实用程序文件中，可以使我们的工作更加简洁。这样一来，字体实用程序文件就会变成下面第五张截图中的样子。

我们的 layout.js 文件看起来就像下面第六张截图所示的那样简单。请仔细观察字体（配置变量）是如何导出为新的 JavaScript 变量，然后导入并用于 layout.js 文件的。

注：还要观察并注意，用于封装 children 道具的 main 元素上的 nunito_sans （字体）类与从 utils 文件导入的 JavaScript 变量不同，尽管它们的拼写相同。你可以更改拼写以避免混淆/错误。

这种方法是我最喜欢的，因为从长远来看，它简化了你的构建工作。设置完成后，您只需调用自定义字体类，然后就可以享受构建过程了。

方法 2：通过 Tailwindcss 配置在 Next.js 14 中使用谷歌字体

下一种方法是使用 Tailwindcss 配置文件设置字体。

简要回顾一下 Tailwindcss 配置文件

Tailwindcss 配置文件是一个包含项目中 Tailwindcss 配置的文件。以下是为本演示安装的应用程序的 Tailwindcss 配置文件。

导入和设置字体

在使用第二种方法重构代码并引入字体实用程序文件来实现字体之前，我们不会从头开始。字体实用程序文件将与上文讨论的第一种方法保持一致，如下截图所示。

在这种情况下，差异将来自于

• 在项目中使用字体，以及
• 我们不会使用 CSS（变量和选择器）*，而是在 Tailwindcss 配置文件中处理字体设置。

解释执行过程

首先：如上所述，我们已经确定字体工具文件将保持不变。现在，我们可以在 Tailwindcss 配置文件中设置字体。

其次：下面是 Tailwindcss 配置文件的外观。

这里值得注意的变化是在 extend 对象中添加了 fontFamily 对象/设置，而该对象又包含在 Tailwindcss 配置文件的 theme 对象中。这就是我们需要做的全部工作。

最后：现在，我们可以在应用程序中的任何地方使用字体，就像在上一个方法中所做的那样。但在这种情况下，我们需要在每个字体 class 的前缀加上 “font” 关键字。因此， nunito_sans （字体）类将变为 font-nunito_sans， poppins（字体）类将变为 font-poppins – 如下两张截图所示，分别是 layout.js 文件和 page.js 文件。

方法 3：通过默认的 className 方法在 Next.js 14 中使用 Google 字体

本文的最后一种方法是全新安装 Next.js 14 时使用的默认方法。

了解本地/默认 className 方法

在新安装的 Next.js 应用程序中使用的默认方法有一些缺点。这种方法的一个问题是，由于字体是使用变量以 Javascript 格式导入和配置的，因此必须不断将一行 class 名转换为 JSX。前面讨论过的另外两种方法涉及到 CSS 的使用，因此更易于使用；它们能让你在开发过程中获得更好的开发体验。

下面是在新安装的 Next.js 应用程序中导入和使用字体的情况。

导入和设置字体

本方法的字体导入在字体实用程序文件中将保持不变。但我们需要做一些改动。

解释执行过程

首先：在本方法中，从字体工具文件中 export 的将是 className 名（例如， nunit_sans_init.className ），而不是前两种方法中使用的 CSS 变量（例如， nunit_sans_init.variable ）。此外，请注意，我们不需要像其他两种方法那样，在全局 CSS 文件或 Tailwindcss 配置文件中做任何进一步设置。

请看下面的截图。

最后：现在，我们可以在应用程序中的每个 className 属性上使用从字体实用程序文件导出的 JavaScript 变量，如下图所示。

这种方法的另一个问题是，无论在哪个文件中使用字体，我们都必须不断地将字体导入。

这种方法适用于简单项目或只需使用单一字体的项目。但是，如果需要使用多种字体，这种方法就变得具有挑战性。

对三种不同方法的比较和评论

本文讨论的三种方法各有利弊。以下是我对如何使用它们的评论。

如果你正在构建一个需要多种字体的项目，请使用 CSS（变量和选择器）方法或 TailwindCSS 配置方法。尤其是中型或大型字体。这将给你带来灵活性和便利性，只需调用 CSS 类名，你的字体就能完美运行。

这两种方法的问题在于需要花费大量时间进行设置。不过，当你掌握了这些步骤后，这就不再是问题了。

CSS（变量和选择器）方法是我最推荐的方法，因为它最简单易用。它给你带来的令人印象深刻的开发体验是无与伦比的。

如果你正在构建一个简单或小规模的项目，请使用默认的 className 方法。如果你正在构建一个只需要单一字体的项目，这种方法也是一个完美的选择。

小结

就是这样。在 Next.js 14 应用程序中使用 Google 字体的三种超棒方法：充分利用新的构建时间方法，为应用程序用户提供他们应得的更好 UX（用户体验）。