如何更改nuxtjs3中的默认顺风字体系列

Question

我创建了一个 Nuxt3 项目并安装了

 @nuxtjs/tailwindcss

包。我想将我最喜欢的字体设置为默认字体。我阅读了顺风文档，但我不明白问题出在哪里，字体没有设置为默认值。

我的顺风配置：

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
      fontFamily: {
        sans: ['Montserrat',...defaultTheme.fontFamily.sans]
      },
  },
};

我的字体：

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: normal;
    src: local('./Montserrat-Regular.ttf'),
    url('./Montserrat-Regular.ttf') format('ttf');
}

Answer 1

首先通过放入模块数组中，在 nuxt.config.ts|js 中注册

@nuxtjs/tailwindcss

，如下所示：

// nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss',
    ],
});

我们回到项目并在此目录中创建

main.css

=>

assets/css/main.css

然后将您的字体导入到此文件中，如下所示：

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: normal;
   src: url('../css/Font/Montserrat-Regular.ttf') format('ttf');
}

然后通过添加

css

属性在 Nuxt 配置中注册该文件：

// nuxt.config.ts

export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
  ],
  modules: [
    '@nuxtjs/tailwindcss',
  ],
});

然后将你的顺风配置更改为：

/** @type {import('tailwindcss').Config} */
export default {
    content: [],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Montserrat', 'sans-serif']
            }
        },

    },
}