Tailwind/CSS 使用自定义字体

Posted 2023-03-06

【中文标题】Tailwind/CSS 使用自定义字体

【英文标题】：Tailwind/CSS using custom fonts

【发布时间】：2021-03-27 22:32:02

【问题描述】：

我有一个项目需要使用自定义字体。但我不知道如何在我的 html 中使用它。我已经在网上搜索了如何执行此操作，但所有示例都使用包含在一个文件中的字体。我的字体包含在多个文件中。

如何指定要在每个元素上使用的 CircularStd 的特定字体？

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

【参考方案1】：

解决此问题的方法是在您的tailwindconfig.js 中创建一个自定义字体类并将其扩展到您的默认顺风主题。例如，如果您使用的是 Google 字体，并且希望将字体 Manrope 用于特定的标题，则可以像这样扩展 fontFamily 变体：

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

现在，要使用此自定义类，请按照语法 font-fontFamily 在您的 html 中声明它。所以在这种情况下，我们将使用 font-manrope。

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

【参考方案2】：

如果您认为您的字体有很多文件并且您都需要它们，那么为什么不为每个文件创建一个@fontface，尽管这不是最佳做法，例如，您应该选择带有灯光的文件并且标准字体，然后基于它创建@fontface 并包含它的文件，其他的像粗体和斜体最终可以使用 CSS 完成，但最重要的是你已经实现了你的字体。 例如，您将添加您的字体：

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

如果你想要它是粗体和斜体使用

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

希望对你有帮助！

【讨论】：

所以我需要在一个主字体文件中导入所有不同的文件，然后在字体中导入该主文件？

不确定在主文件中导入所有不同文件是什么意思，您需要做的就是只导入一个文件，最好是轻标准文件，方法是在字体中实现它，然后是你的字体将工作。

但是我如何定义书的风格呢？当我尝试做font-style: book; 时，这种风格不适合。

书籍风格是什么意思？ book 不是 font-style 的有效值，这就是它不起作用的原因