Question

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

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

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

Answer 1

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

首先，您必须运行npm run build，以便创建顺风文件：
- 〜/ tailwind.config.js
- 〜/ assets / css / tailwind.css
在fonts下创建一个文件夹assets并放置您下载的字体。
在~/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);

等

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

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

不要忘了从布局中删除所有与font-family相关的默认CSS的页面

Answer 2

Nuxt 2.12和Tailwind 1.4.0（假设您使用的是@ nuxtjs / tailwind）：

tailwind.css：

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

/* add fonts here */
@import '~assets/css/fonts';

fonts.css：

@font-face {
  font-family: Underground;
  font-weight: 400;
  src: url('~assets/fonts/Roboto.woff2') format('woff2'),
       url('~assets/fonts/Roboto.woff') format('woff');
}

在tailwind.config.js中：

module.exports = {
  theme: {
    fontFamily: {
      roboto: ['Roboto']
    }
  },
  variants: {},
  plugins: []
}

然后，您可以在default.vue布局中全局使用此字体：

<template>
  <div class="container mx-auto font-roboto">
    <nuxt />
  </div>
</template>

顺便说一句，静态不是用于资产（例如字体），而是用于文件（例如robots.txt，sitemap.xml）

Answer 3

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

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 500;
  src: url('/fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');
}

在tailwind.config中：

theme: {
    extend: {
        fontFamily: {
             heading: ['Roboto', 'sans-serif'],
             body: ['OpenSans', 'sans-serif']
        }
    }
}

此后，您必须在所需的元素中使用类“ font-heading”或“ font-body”。字体的字体粗细必须与Tailswind的字体粗细类相关联。也许我们现在有2种不同的解决方案。再次谢谢你。

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

3 个答案: