Tailwind CSS on GitHub

字体序列

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

Default class reference

Class
Properties
font-sansfont-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-seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Sans-serif

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

The quick brown fox jumps over the lazy dog.

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

Serif

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

The quick brown fox jumps over the lazy dog.

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

Monospaced

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

The quick brown fox jumps over the lazy dog.

<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,
    }
  }