1.第一种方法：我们将web字体放到public目录下
这个方法我们能在indx.html文件中通过link标签引用web字体的css文件

index.html引入

<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>fonts/cabin.css"/>
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>fonts/daysOne.css"/>

在App.vue文件中使用它

<template>
  <div id="app">
    <span class="fonts">ABCDE</span>
    <router-view/>
  </div>
</template>
<script></script>

<style scoped>
  .fonts{
    font-family: 'Days One';
    font-size: 20px;
    color: red;
  }
</style>

2.第二种方法：我们将web字体文件放到assets目录下,在man.js文件中引用

main.js引入

import './assets/fonts/cabin.css'
import './assets/fonts/daysOne.css'

使用方式同上，主要是通过css设置font-family的值