【Nuxt3】vue3+tailwindcss+vuetify引入自定义样式

一、目的

在项目中引入自定义的字体样式（全局页面都可使用）

二、步骤

1、下载好字体

字体的后缀可以是ttf、otf、woff、eot或者svg（推荐前三种）

以抖音字体为例下载好放在静态文件夹（font）下

案例字体：抖音字体

2、创建全局的css文件

/*/assets/css/global.css*/

/*
全局样式文件
在本文件下的所有样式，任何页面下可以直接引用
*/

/*引入字体样式：抖音字体       https://github.com/bytedance/fonts */
@font-face {
    font-family: 'DouyinSansBold';
    src: url('/font/DouyinSansBold.ttf') format('truetype');
}

/*引入字体样式：英文字体    https://www.cdnfonts.com/buttershine-serif.font */
@font-face {
    font-family: 'buttershine-serif';
    src: url('/font/buttershine-serif/buttershineSerif.woff') format('woff');
}

/**
字体样式
英文字体：buttershine-serif
中文字体：DouyinSansBold（抖音字体）
 */
.font-buttershine-serif {
    font-family: 'buttershine-serif', 'DouyinSansBold', sans-serif;
}

3、将全局css文件导入nuxt项目中

在nuxt.config.ts文件中添加

export default defineNuxtConfig({
    css: [
        '~/assets/css/global.css'
    ],
  }

4、使用

<p class="font-buttershine-serif text-3xl md:text-4xl lg:text-5xl">{{ $t('shop.body.choose.title1') }} </p>

对应代码

对应的效果

---

文中的展示项目：谢谢您的Star~