字体系列

​基础用法

​设置字体系列

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

<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 来仅 在 hover应用 font-serif.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 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');
  }
}

在 theme customization 文档中了解有关自定义默认主题的更多信息。

​提供默认字体设置

在配置自定义字体时，您可以选择使用 [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 属性的 adding a custom base style 自定义项目中使用的默认字体：

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

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

如果您已将字体系列实用程序自定义为具有不同的名称，并且不希望项目中有 font-sans 实用程序可用，那么这是最好的方法。