Tailwind CSS 字體序列

字體序列

控制元素字體序列的功能類(lèi)。

Sans-serif

使用 ?font-sans? 應(yīng)用一個(gè)網(wǎng)絡(luò)安全的無(wú)襯線(xiàn)字體系列：

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

Serif

使用 ?font-serif? 來(lái)應(yīng)用網(wǎng)絡(luò)安全的襯線(xiàn)字體系列：

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

Monospaced

使用 ?font-mono? 來(lái)應(yīng)用一個(gè)網(wǎng)絡(luò)安全的等寬字體系列：

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

響應(yīng)式

要在特定的斷點(diǎn)處控制元素的字體序列，請(qǐng)?jiān)谌魏维F(xiàn)有的字體序列功能類(lèi)前添加 ?{screen}:? 前綴。例如，使用 ?md:font-serif? 來(lái)僅在中等大小及以上的屏幕應(yīng)用 ?font-serif? 功能類(lèi)。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息，請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。

自定義

Font Families

默認(rèn)情況下，Tailwind 提供三種字體系列實(shí)用程序：跨瀏覽器無(wú)襯線(xiàn)堆棧、跨瀏覽器襯線(xiàn)堆棧和跨瀏覽器等寬堆棧。您可以通過(guò)編輯 Tailwind 配置的 ?theme.fontFamily? 部分來(lái)更改、添加或刪除這些。

  // 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"', ...],
      }
    }
  }

字體序列可以指定為一個(gè)數(shù)組或一個(gè)簡(jiǎn)單的逗號(hào)分隔的字符串：

{
  // Array format:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // Comma-delimited format:
  'sans': 'Helvetica, Arial, sans-serif',
}

請(qǐng)注意，Tailwind 不會(huì)自動(dòng)為您轉(zhuǎn)義字體名稱(chēng)。如果您使用的字體包含無(wú)效的標(biāo)識(shí)符，請(qǐng)用引號(hào)包住它或轉(zhuǎn)義這些無(wú)效的字符。

{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}

變體

默認(rèn)情況下， 針對(duì) font family 功能類(lèi)，只生成 responsive 變體。

您可以通過(guò)修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?fontFamily ?屬性來(lái)控制為 font family 功能生成哪些變體。

例如，這個(gè)配置也將生成 hover and focus 變體:

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

禁用

如果您不打算在您的項(xiàng)目中使用 font family 功能，您可以通過(guò)在配置文件的 ?corePlugins ?部分將 ?fontFamily ?屬性設(shè)置為 ?false ?來(lái)完全禁用它們：

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