如何通过 Tailwind CSS 使用从 NPM (Fontsource) 下载的字体？

Question

我正在开发 Next.js 项目，当我从 Fontsource 下载 NPM 包（使用 Advent Pro 字体）时，它会下载到我的node_modules文件夹中。其中有字体文件（ttf、toff 等），还有定义 的 CSS 文件，@font_face以便将其导入其他文件。

有问题的 NPM 包：https://www.npmjs.com/package/@fontsource/advent-pro

根据 Tailwind 的文档，我应该使用新字体（在 中tailwind.config.js）扩展 Tailwind 的默认主题。以下是我的“尝试”：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,tsx,jsx}",
    "./components/**/*.{js,ts,tsx,jsx}",
  ],
  purge: [
    "./pages/**/*.{js,ts,tsx,jsx}",
    "./components/**/*.{js,ts,tsx,jsx}",
  ],
  darkMode: 'class', // or'media' or 'class'  
  theme: {
    extend: {
      colors: {
        'cream': '#FFDFBD',
        'wood': '#460B0B'
      },
      backgroundImage: {
        'darkModeBG': "linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05)), url('~/public/overpass.gif')",
        'lightModeBG': "url('~/public/station.gif')"
      },
      fontFamily: {
        titillium: ['Titillium-Web', 'sans-serif'],
        adventProHeader: ['Advent Pro', 'sans-serif']
      }
    },
  },
  plugins: [],
}

但在网站上，当我应用font-adventProHeader到我的<h1>标签时，它会应用无衬线字体。

我不想将文件夹@font_face中的代码重写node-modules到我的globals.css文件中。有办法解决这个问题吗？

Answer 1

根.css

@import '@fontsource/fira-code';

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.ts

theme: {
        extend: {
            fontFamily: {
                fira: 'fira-code, Times New Roman, serif',
            },
        }
    }

你可以在任何 html 标签中使用：font-fira