如何在 Tailwind CSS 中自定义字体？

Tailwind CSS 是一个流行的 CSS 框架，它提供了一系列的 CSS 类，能够快速构建出漂亮的 UI 组件。但是，有的时候我们需要自定义字体，以满足项目的需求。本文将介绍如何在 Tailwind CSS 中自定义字体。

准备工作

在开始之前，我们需要准备以下工作：

• 安装 Node.js 和 npm
• 创建一个新的 Tailwind CSS 项目

步骤

第 1 步：安装依赖

在项目根目录下，运行以下命令安装 postcss-font-family-system-ui 插件：

npm install postcss-font-family-system-ui --save-dev

该插件能够让我们使用系统字体。

第 2 步：配置 Tailwind

打开 tailwind.config.js 文件，添加以下内容：

// javascriptcn.com 代码示例
module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'system-ui',
        // 如果系统字体不可用，则使用默认字体
        '-apple-system',
        'BlinkMacSystemFont',
        'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        'Arial',
        'Noto Sans',
        'sans-serif',
        // 如果以上字体都不可用，则使用 monospace 字体
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji',
        'monospace',
      ],
    },
  },
  plugins: [
    require('postcss-font-family-system-ui')({
      // 使用系统字体的类名
      classes: ['font-sans'],
    }),
  ],
}

以上代码中，我们定义了一个名为 sans 的字体族，它使用了系统字体，并在系统字体不可用时使用默认字体。我们还安装了 postcss-font-family-system-ui 插件，并使用了 font-sans 类名。

第 3 步：使用自定义字体

在 HTML 文件中，使用以下代码引入 Tailwind CSS：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.2.0/dist/tailwind.min.css">

然后，使用以下代码使用自定义字体：

<div class="font-sans">Hello, World!</div>

以上代码中，我们使用了 font-sans 类名，它将应用系统字体。

总结

以上就是在 Tailwind CSS 中自定义字体的全部步骤。通过这篇文章，我们学会了如何在 Tailwind CSS 中使用自定义字体，以满足项目的需求。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658403f1d2f5e1655deccc56