Tailwind CSS 如何设置全局字体？

在前端开发中，我们通常需要使用不同的字体来渲染网页内容，以达到不同的视觉效果。在 Tailwind CSS 中，我们可以轻松设置全局字体，并通过这篇文章来学习如何做到这一点。

Tailwind CSS 中的字体规则

Tailwind CSS 中的字体规则通过命名方案进行定义。例如，以下命名约定用于在生成 CSS 类时指定字体系列：

• font-sans
• font-serif
• font-mono

这些名称通常用来设置字体系列，例如使用 sans-serif、serif 或 monospace 字体。

Tailwind CSS 还提供了更多的约定来指定其他字体属性，例如字体尺寸、字体粗细、字体颜色等。

如何设置全局字体

要在 Tailwind CSS 中设置全局字体，我们必须使用 @tailwind base 规则来指定文档的基本样式，包括全局字体和其他基本样式：

@tailwind base;

此外，我们还需要在 tailwind.config.js 文件中定义所需的字体系列。首先，找到 theme 配置项，然后添加 fontFamily 字段，然后添加所需字体系列：

-- -------------------- ---- -------
-------------- - -
  ------ -
    ----------- -
      ----- --------- -------------
      ------ ---------- --------- -----------
      ----- --------- ----------
    --
  --
  --------- ---
  -------- ---
--

在上面的示例中，我们定义了三个字体系列 - sans、serif、mono，并为每个字体系列指定了使用的字体。注意，我们可以为每个字体系列定义多个字体。如果第一个字体不可用，则使用后续字体。

现在，我们可以在 Tailwind CSS 中使用 font-{系列} 类来应用定义的字体系列。例如，为了将文本设置为默认的 sans-serif 字体：

<p class="font-sans">这是一个默认的 sans-serif 字体。</p>

同样，要将文本设置为 Playfair Display 字体，可以使用以下类：

<p class="font-serif">这是 Playfair Display 字体。</p>

示例

假设我们正在开发一个博客网站，并希望采用自定义的字体风格。我们可以使用 Tailwind CSS 来设置全局字体，并将其应用于我们的网站上。

首先，我们必须通过 CDN 引入 Tailwind CSS 样式表：

<link rel="stylesheet" href="https://cdn.tailwindcss.com/"></link>

然后，在文档的头部中，我们可以指定全局字体：

<style>
  @tailwind base;

  html {
    font-family: 'Open Sans', sans-serif;
  }
</style>

最后，我们定义所需的字体系列和其他 Tailwind 配置。在 tailwind.config.js 文件中，我们可以添加以下配置：

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Open Sans', 'sans-serif'],
    },
  },
};

现在，所有文本都将使用指定的 Open Sans 字体进行渲染。如果您需要在某些地方使用其他字体，只需将其指定为元素的 font-family 或使用其他 Tailwind 样式即可。

结论

在 Tailwind CSS 中，我们可以轻松设置全局字体。为此，我们需要先在 tailwind.config.js 文件中定义所需的字体系列，然后指定全局字体的基本样式。

通过这篇文章的学习，您现在应该了解如何在 Tailwind CSS 中设置全局字体，并可以在您的下一个项目中轻松应用它。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4ef95c5c563ced567aade