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

Question

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

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

如果有人可以帮助我，我将不胜感激。

Answer 1

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

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

   • 〜/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);

ETC。

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

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

5. 不要忘记从布局和页面中删除与以下内容相关的所有默认 CSSfont-family

Answer 2

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

顺风.css：

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

/* add fonts here */
@import '~assets/css/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

截至 2021 年 10 月的最简单解决方案，Nuxt 2.15.7 和 Tailwind 4.2.0

添加包

yarn add --dev @nuxtjs/google-fonts

使用您的字体进行配置

nuxt.config.js

  googleFonts: {
    families: {
      'Architects Daughter': true,
      // or:
      // Lato: [100, 300],
      // Raleway: {
      //   wght: [100, 400],
      //   ital: [100]
      // },
    },
  },

tailwind.config.js

    fontFamily: {
      handwritten: ['Architects Daughter'],
    },

在您的 HTML 中使用

    <h2 class="font-handwritten">
      This is a custom font
    </h2>

手动重新加载页面，因为热重新加载可能不够。