一、目的

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

二、步骤

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~