在 Nuxt/Tailwind 项目中加载自定义字体 [英] Loading custom fonts in Nuxt/Tailwind Project

问题描述

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

Hi everybody and sorry my english.

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

I have created a nuxt.js project with Tailwind. I´d like to custom my font family, so I downloaded some font files from Google Fonts. I have been reading Tailwind docs, but i can´t understand where do i have to place the font files and how to config Tailwind for loading the files.

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

I´d be very gratefull if somebody could help me.

推荐答案

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

I'm assuming you're using the module @nuxtjs/tailwindcss.

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

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

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

Create a folder fonts under assets and place the fonts you've downloaded.

在 ~/css/tailwind.css 中包含您的字体，如下所示:

Include your fonts in ~/css/tailwind.css, as such:

@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);

等

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

1. Check out tailwind's docs on how to add font families in tailwind.config.js, and which configuration better suits your needs: (the following one is a quick working example)

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

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

1. Dont' forget to remove from your layout and page all the default CSS related to font-family

这篇关于在 Nuxt/Tailwind 项目中加载自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！