Tailwind CSS 字体序列

字体序列

控制元素字体序列的功能类。

Sans-serif

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

<p class="font-sans ...">
  The quick brown fox jumps over the lazy dog.
</p>

Serif

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

<p class="font-serif ...">
  The quick brown fox jumps over the lazy dog.
</p>

Monospaced

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

<p class="font-mono ...">
  The quick brown fox jumps over the lazy dog.
</p>

响应式

要在特定的断点处控制元素的字体序列，请在任何现有的字体序列功能类前添加 ​{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 ​属性设置为 ​false ​来完全禁用它们：

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