乐闻世界logo

TailwindCSS 如何设置全局字体以及给特定元素设置字体

前言

TailwindCSS 是一个功能类优先的 CSS 框架，它允许开发者通过组合不同的工具类来快速构建自定义的用户界面。设置全局字体及给特定元素设置字体是前端开发中的常见需求，TailwindCSS 为这一需求提供了简单有效的解决方案。接下来，我们将一步步地探讨如何在 TailwindCSS 中实现字体设置。

字体文件引入

一旦选择了字体，你需要将它们添加到你的项目中。这里有两种常见的方法：使用在线字体服务或自托管字体文件。

使用在线字体服务:

例如，如果你使用Google 字体，你可以在HTML文件的 <head>部分添加一个 <link>标签：

html
<head>
  <!-- ... 其他链接 ... -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
</head>

自托管字体文件:

如果你选择自托管字体文件，你需要将字体文件放入你的项目目录，然后使用 @font-face在CSS中声明字体。例如：

css
@font-face {
  font-family: 'MyCustomFont';
  src: url('/path-to-fonts/my-custom-font.woff2') format('woff2'),
       url('/path-to-fonts/my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

确保将字体文件放在可通过网络访问的位置，并且在 @font-face规则中正确地引用路径。

设置全局字体

在 TailwindCSS 中设置全局字体非常简单。你需要在 tailwind.config.js 文件中配置 theme 的 extend 部分来自定义字体。

首先，你需要确定你想要使用的字体，并将其包含在你的项目中。你可以通过使用 @font-face 规则、从 Google 字体等服务导入字体，或者使用系统字体。

接着，配置 tailwind.config.js 文件以使用这些字体。以下是一个如何配置全局字体的例子：

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // 使用 'Inter' 作为主要的无衬线字体
        serif: ['Georgia', 'serif'],   // 使用 'Georgia' 作为主要的衬线字体
      },
    },
  },
}

在此配置中，我们设置了两个字体堆栈：一个是 sans 类型的 Inter 字体，另一个是 serif 类型的 Georgia 字体。此操作将覆盖 TailwindCSS 默认的字体堆栈。

现在，在 HTML 中，你可以通过使用 font-sans 或 font-serif 类来应用全局字体：

html
<body class="font-sans">
  <!-- 文本内容将使用 'Inter' 字体 -->
</body>

给特定元素设置字体

有时候，你可能只想要为页面上的特定元素设置不同的字体。这同样可以在 tailwind.config.js 文件中通过添加额外的字体堆栈来完成。

例如，假设你想要为所有标题元素设置一个特殊的字体：

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['Poppins', 'sans-serif'], // 添加一个名为 'heading' 的自定义字体堆栈
      },
    },
  },
}

现在，你可以在 HTML 中使用 font-heading 类来为任何元素指定这个字体：

html
<h1 class="font-heading">
  <!-- 这个标题将使用 'Poppins' 字体 -->
</h1>

注意事项

当你为项目引入外部字体时，请确保遵守版权和使用许可。

在生产环境中使用字体时，考虑使用字体子集或字体显示策略，比如 font-display: swap;，以优化性能和用户体验。

如果你使用的是 TailwindCSS 的 JIT（Just-In-Time）模式，你可以在开发过程中即时生成任何你需要的工具类。