【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~