字体序列

Sans-serif

使用 font-sans 应用一个网络安全的无衬线字体系列：

Serif

使用 font-serif 来应用网络安全的衬线字体系列：

Monospaced

使用 font-mono 来应用一个网络安全的等宽字体系列：

响应式

要在特定的断点处控制元素的字体序列，请在任何现有的字体序列功能类前添加 {screen}: 前缀。例如，使用 md:font-serif 来仅在中等大小及以上的屏幕应用 font-serif 功能类。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看 响应式设计 文档。

定制

Font Families

默认情况下，Tailwind 提供了三个字体系列功能类：一个跨浏览器的无衬线字体堆栈，一个跨浏览器的衬线字体堆栈和一个跨浏览器的等宽字体堆栈。您可以通过编辑您的 Tailwind 配置中的 theme.fontFamily 部分来改变、添加或删除这些功能。

  // tailwind.config.js
  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', ...],
}

变体

默认情况下， 针对 font family 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 fontFamily 属性来控制为 font family 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       fontFamily: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 font family 功能，您可以通过在配置文件的 corePlugins 部分将 fontFamily property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontFamily: false,
    }
  }