How to add font package for UI in VUE project

In many projects, we will use specific fonts given to us by the UI, so how do we use them in the project?

first step:

        Create an assets folder in the src directory to store some of our style files, and then create a fonts folder in the current directory to store the font package provided by the UI: as shown below

Step two:

        Also create a style directory under the assets directory, create a css file named public, and introduce our font package, as follows:

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

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

at last:

        Introduce the public.css just written into man.js, as follows:

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

         Finally, we use it in the vue page, as follows:

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