Tailwind CSS - 字体族

Tailwind CSS - 字体家族

Tailwind CSS 提供了实用工具类来控制文本元素的字体家族（font family）。默认情况下，它包含三种开箱即用的字体堆栈，分别适用于无衬线（sans-serif）、衬线（serif）和等宽（monospace）字体。这些字体堆栈旨在实现跨平台兼容性并提供美观的视觉效果。

默认字体家族实用工具类

以下是默认的字体家族类及其对应的 CSS 字体堆栈：

Class	CSS Properties
font-sans	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”;
font-serif	font-family: ui-serif, Georgia, Cambria, “Times New Roman”, Times, serif;
font-mono	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace;

示例：应用默认字体家族

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Family Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 font-sans text-slate-800">

  <h1 class="text-3xl font-bold mb-4">Default Font Families</h1>

  <div class="space-y-4">
    <p class="font-sans text-lg">This is sans-serif text. It's great for UI and body copy.</p>
    <p class="font-serif text-lg">This is serif text. It's often used for long-form reading.</p>
    <p class="font-mono text-lg">This is monospace text, perfect for `code snippets`.</p>
  </div>

</body>
</html>

注意：您可以通过将字体类（例如 font-sans）应用于 <body> 元素，来为整个网站设置默认字体，如示例所示。

使用自定义字体

Tailwind 最强大的功能之一就是其可定制性。在实际项目中，添加自己的自定义字体是一项常见需求。以下是现代且推荐的工作流程。

步骤 1：导入您的字体

首先，您需要让项目能够访问该字体。您可以通过在 HTML 的 <head> 中链接 Google Fonts 等服务来完成此操作，或者对于自托管字体，可以使用主 CSS 文件中的 @font-face 规则。

方法 A：Google Fonts（在 index.html 中）

<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto+Mono&display=swap" rel="stylesheet">
  <link href="/dist/output.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

方法 B：自托管字体（在 src/input.css 中）

src/input.css

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤 2：将字体添加到您的主题配置

接下来，通过扩展 fontFamily 键，在 tailwind.config.js 文件中注册您的新字体。这会让 Tailwind 识别您的字体，并允许它生成相应的实用工具类（例如 font-inter）。

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {
      fontFamily: {
        // Add 'Inter' to the front of the sans-serif stack
        'sans': ['Inter', ...defaultTheme.fontFamily.sans],
        // Create a new utility class 'font-roboto-mono'
        'roboto-mono': ['"Roboto Mono"', 'monospace'],
      },
    },
  },
  plugins: [],
}

专家提示： 展开 ...defaultTheme.fontFamily.sans 可以确保您保留 Tailwind 出色的备用字体。

步骤 3：使用您的自定义字体

配置主题并重新构建 CSS 后，您现在可以在 HTML 中使用新的字体类了。

<body class="font-sans"> <!-- Now defaults to Inter -->
  <h1 class="text-2xl">My website uses the Inter font.</h1>
  <code class="font-roboto-mono">This code block uses Roboto Mono.</code>
</body>

常见问题与调试

• 字体未生效？ 确保您的 tailwind.config.js content 路径正确，并且包含了您正在使用该类的文件。JIT 引擎依赖此信息来生成必要的 CSS。
• 重新构建 CSS： 对 tailwind.config.js 进行任何更改后，您都必须重新启动或重新运行构建过程，以便更改生效。
• 检查字体名称： 您在 tailwind.config.js 中使用的名称必须与 @font-face 规则中定义或从 Google Fonts 导入的字体家族名称匹配。请注意空格和引号！