使用自定义字体的Tailwind/CSS

我有一个项目，我需要使用自定义字体。但是我不知道如何在我的HTML中使用它。我在网上搜索了如何做到这一点，但所有示例都使用包含在一个文件中的字体。我的字体包含在多个文件中

如何指定要在每个元素上使用的循环TD的特定字体

这是我的index.scss文件的屏幕截图，其中包含tailwind导入和我的字体定义：

---

如果您认为您的字体有很多文件，并且需要所有文件，那么为什么不为每个文件创建一个

@fontface

，尽管这不是最佳做法，例如，您应该选择具有浅色和标准字体的文件，然后基于它创建

@fontface

，并将其包含在文件中。其他文件（如粗体和斜体）最终可以使用CSS完成，但最重要的是实现了字体。 例如，您将添加字体：

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

如果你希望它是粗体和斜体，使用

p{
font-weight:600;
  font-style: italic;
}

---

我希望这会有帮助

一种方法是在

tailwindconfig.js

中创建一个自定义字体类，并将其扩展到默认的tailwind主题。例如，如果您正在使用Google字体，并且希望将字体Manrope用于特定标题，则可以扩展fontFamily变体，如下所示：

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'manrope': 'Manrope',
      }
    }
  }
}

现在，要使用这个自定义类，请按照语法

font-{fontFamily}

在html中声明它。在本例中，我们将使用字体manrope

<h4 class="font-manrope">I'm a header using the font Manrope</h4>

我是使用字体Manrope的标题

所以我需要在一个主字体文件中导入所有不同的文件，然后在字体中导入该主文件？不确定在主文件中导入所有不同的文件是什么意思，您只需要导入一个文件，最好是在字体中实现轻标准文件，那么你的字体就可以了。但是我该如何定义书的风格呢？当我试着做

font-style:book这种风格不受欢迎。你所说的书籍风格是什么意思
book
不是
font-style
的有效值，这就是它不起作用的原因