Tailwind CSS 字體序列

字體序列

控制元素字體序列的功能類。

Sans-serif

使用 ?font-sans? 應用一個網(wǎng)絡安全的無襯線字體系列：

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

Serif

使用 ?font-serif? 來應用網(wǎng)絡安全的襯線字體系列：

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

Monospaced

使用 ?font-mono? 來應用一個網(wǎng)絡安全的等寬字體系列：

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

響應式

要在特定的斷點處控制元素的字體序列，請在任何現(xiàn)有的字體序列功能類前添加 ?{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"', ...],
      }
    }
  }

字體序列可以指定為一個數(shù)組或一個簡單的逗號分隔的字符串：

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