如何在 Tailwind 中使用给定（内置）系列中的特定字体？

【问题标题】：How to use a particular font from a given (built in) family with Tailwind?如何在 Tailwind 中使用给定（内置）系列中的特定字体？
【发布时间】：2021-11-25 04:16:54
【问题描述】：

我想使用 Tailwind 将“Courier New”字体应用到我的文本中。

在文档中，我看到它在font-mono https://tailwindcss.com/docs/font-family 下可用

但是当我应用 font-mono 时，它应用了所有这些系列，我如何特别应用“Courier New”？

【问题讨论】：

标签： next.js tailwind-css

【解决方案1】：

您可以覆盖Tailwind configuration file 中的font-mono 字体系列：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'mono': ['"Courier New"', 'monospace'],
      },
    },
  },
};

当 Courier New 不可用时，您应该保留 monospace 字体作为备用字体。

此外，您可以在 theme.extend.fontFamily 对象中添加新字体系列（theme.extend.fontFamily.foobar 转换为 font-foobar CSS 类），因此完全为您的 Courier New 特定用途创建一个新系列可能更明智大小写而不是覆盖默认值。

【讨论】：