在Nuxt / Tailwind项目中加载自定义字体

Question

大家好，对不起我的英语。

我已经用Tailwind创建了一个nuxt.js项目。我想自定义字体系列，因此我从Google字体下载了一些字体文件。我一直在阅读Tailwind文档，但是我不明白我必须在哪里放置字体文件以及如何配置Tailwind以加载文件。

如果有人可以帮助我，我将非常感激。

Answer 1

我假设您正在使用模块@ nuxtjs / tailwindcss。

1. 首先，您必须运行npm run build，以便创建顺风文件：

   • 〜/ tailwind.config.js
   • 〜/ assets / css / tailwind.css

2. 在fonts下创建一个文件夹assets并放置您下载的字体。

3. 将字体包括在~/css/tailwind.css中，例如：

@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Regular', 400, normal, otf);
@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Medium', 600, medium, otf);

等

4. 请查看tailwind的有关如何在tailwind.config.js中添加字体系列的文档，以及哪种配置更适合您的需求：（以下是一个快速工作的示例）

module.exports = {
  theme: {
    fontFamily: {
      sans: ["KapraNeuePro"],
      serif: ["KapraNeuePro"],
      mono: ["KapraNeuePro"],
      display: ["KapraNeuePro"],
      body: ["KapraNeuePro"]
    },
    variants: {},
    plugins: []
  }
};

5. 不要忘记从布局中删除和页面上与font-family相关的所有默认CSS>

Answer 2

非常感谢Ramigs。经过数小时的测试错误，在知道您的答案之前，我得到了另一个解决方案。我将字体文件放在“静态”文件夹中创建的“字体”文件夹中。在资产> CSS> tailwind.css中：