如何在Tailwind中使用内置字体族中的某款特定字体

算力阿峰

2026-10-1

Tailwind 单独指定使用 Courier New 字体的两种方案

方案1：临时单元素使用（无需修改配置）

直接使用 Tailwind 自带的任意值类语法，给目标元素添加类名 font-['Courier_New'] 即可，示例代码：

<p class="font-['Courier_New'] text-base">这是使用 Courier New 渲染的文本</p>

注意：任意值内的空格需要替换为下划线，或者用引号包裹字体名称避免解析错误。

方案2：全局扩展配置（适合多次复用场景）

修改项目根目录下的 tailwind.config.js 文件，在 theme.extend.fontFamily 字段下新增自定义字体规则：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其他原有配置保持不变
  theme: {
    extend: {
      fontFamily: {
        // 若完全不需要兜底字体，可删掉后面的monospace项
        courier: ['"Courier New"', 'monospace'],
      },
    },
  },
}