Cómo agregar el paquete de fuentes proporcionado por la interfaz de usuario en el proyecto VUE

En muchos proyectos, usaremos la fuente específica que nos proporciona la interfaz de usuario, entonces, ¿cómo la usamos en el proyecto?

primer paso:

        Cree una carpeta de activos en el directorio src para almacenar algunos de nuestros archivos de estilo y luego cree una carpeta de fuentes en el directorio actual para almacenar el paquete de fuentes proporcionado por la interfaz de usuario: como se muestra a continuación

Segundo paso:

        También cree un directorio de estilos en el directorio de activos, cree un archivo CSS llamado público e importe nuestro paquete de fuentes, de la siguiente manera:

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

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

por fin:

        Introduzca el public.css recién escrito en man.js, de la siguiente manera:

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

         Finalmente, lo usamos en la página vue, de la siguiente manera:

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