字体系列

​基本用法

​设置字体族

您可以使用字体族实用程序来控制文本的字体。

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-serif ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

​条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:font-serif 仅在悬停时应用 font-serif 实用程序。

<p class="font-sans hover:font-serif">
  <!-- ... -->
</p>

有关所有可用状态修饰符的完整列表，请查看 悬停、聚焦和其它状态 文档。

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如，使用 md:font-serif 仅在中等屏幕尺寸及以上应用 font-serif 实用程序。

<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

要了解更多信息，请查看有关 响应式设计、暗模式 和 其他媒体查询修饰符 的文档。

​使用自定义值

​自定义主题

默认情况下，Tailwind 提供三种字体系列实用程序：跨浏览器无衬线字体堆栈、跨浏览器衬线字体堆栈和跨浏览器等宽字体堆栈。您可以通过编辑 Tailwind 配置文件中的 theme.fontFamily 部分来更改、添加或删除这些实用程序。

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

字体系列可以指定为数组或简单的逗号分隔字符串

{
  // Array format:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // Comma-delimited format:
  'sans': 'Helvetica, Arial, sans-serif',
}

请注意，Tailwind 不会自动为您转义字体名称。如果您使用包含无效标识符的字体，请将其用引号括起来或转义无效字符。

{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}

与任何其他网页项目一样，请确保在您的 CSS 中包含必要的 `@font-face` 或 `@import` 规则，以便为您的网站加载任何使用的自定义字体。

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

@layer base {
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/Roboto.woff2) format('woff2');
  }
}

有关自定义默认主题的更多信息，请参阅 主题自定义 文档。

​提供默认字体设置

您可以选择使用 `[fontFamilies, { fontFeatureSettings, fontVariationSettings }]` 形式的元组，为项目中的每种字体提供默认的 font-feature-settings 和 font-variation-settings，以便在配置自定义字体时使用。

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        '"Inter var", sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32'
        },
      ],
    },
  },
}

​任意值

如果您需要使用一个不适合包含在主题中的 `font-family` 值，请使用方括号，使用任何任意值动态生成属性。

<p class="font-['Open_Sans']">
  <!-- ... -->
</p>

有关任意值支持的更多信息，请参阅 任意值 文档。

​自定义默认字体

为了方便起见，Preflight 将 `html` 元素上的字体系列设置为与您配置的 `sans` 字体匹配，因此更改项目默认字体的其中一种方法是自定义 `fontFamily` 配置中的 `sans` 键。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],
      },
    }
  }
}

您还可以通过 添加自定义基本样式 来自定义项目中使用的默认字体，该样式显式设置 `font-family` 属性。

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

@layer base {
  html {
    font-family: "Proxima Nova", system-ui, sans-serif;
  }
}

如果您已自定义字体系列实用程序以使用不同的名称，并且不想在项目中使用font-sans实用程序，那么这是最佳方法。