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

Question

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

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

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

Answer 1

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

首先，您必须运行 npm run build，以便创建 tailwind 文件：
- ~/tailwind.config.js
- ~/assets/css/tailwind.css
在assets下创建一个文件夹fonts并放置您下载的字体。
在 ~/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 的文档，了解如何在 tailwind.config.js 中添加字体系列，以及哪种配置更适合您的需求：（以下是一个快速工作示例）

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

不要忘记从布局和页面中删除所有与 font-family

Answer 2

非常感谢 ramigs。经过几个小时的测试错误，在知道你的答案之前，我得到了另一个解决方案。我将字体文件放在我在 "static" 文件夹中创建的文件夹 "fonts" 中。在资产 > 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']
        }
    }
}

之后你必须在你想要的元素中使用 class "font-heading" 或 "font-body" 。字体的字重必须与 Tailswind 的 font-weight classes 相关联。也许我们现在有两种不同的解决方案。再次感谢。

Answer 3

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 4

截至 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>

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

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

Loading custom fonts in Nuxt/Tailwind Project

nuxt.js

tailwind-css

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

添加包

使用您的字体进行配置

在你的HTML