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

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

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

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

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

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

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

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

安装 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 名转换为 *** X。前面讨论过的另外两种 *** 涉及到 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（用户体验）。