VUE项目中如何添加UI给的字体包

在很多项目中我们会使用到UI给我们的特定字体，那我们在项目中如何使用呢？

第一步：

        在src目录下创建一个assets文件夹用于存放我们的一些样式文件，然后再当前目录下再创建一个fonts文件夹用于存放UI给的字体包：如下所示

第二步：

        也是在assets目录下创建style目录，在创建一个名为public的css文件，引入我们的字体包，具体如下：

// 使用 font-face 引入我们的字体包
@font-face {
  // 自定义字体包的名字
  font-family: 'DINAlxxx-Bold';
  // 引入路径
  src: url("../fonts/DIN-BoldAlternate.otf");
}

// 如果有多个就如上所示继续引入

最后：

        在man.js中引入刚刚写好的public.css，具体如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
// 引入刚刚写好的字体包css
import '@/assets/style/public.css'

         最后我们在vue页面中进行使用，具体如下：

.main_tips {
   font-size: 14px;
   // 使用我们自定义的字体包
   font-family: DINAlxxx-Bold;
   font-weight: 400;
   color: #ffffff;
}