使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入

1. 首先下载外部字体包

进到上面网址，找到自己需要的字体，然后DownLoad

2. 在src/assets/下新建font文件夹 ，将下载的字体包放入 

3. font下新建font.css，将字体包统一引入   

@font-face {
  font-family: "ysbth";
  src: url('ysbth.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ceyy";
  src: url('ceyy.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PUHUITI";
  src: url('ALIBABA-PUHUITI-HEAVY.TTF');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "YJSZ";
  src: url('液晶数字字体.TTF');
  font-weight: normal;
  font-style: normal;
}

上面的font-family可以自定义去设置，设置什么，将来使用的时候就用什么 

4. main.js全局引入 

import '@/assets/font/font.css'

5. 项目中直接使用 

<template>
  <div>
    <div class="date">{{ new Date().toLocaleDateString() }}</div>
    <div class="time">{{ new Date().toLocaleTimeString() }}</div>
  </div>
</template>
<style scoped>
.date {
  font-size: 35px;
  color: #2879ff;
  font-family: 'YJSZ';
}
.time {
  font-size: 30px;
  color: #2879ff;
  font-family: 'ysbth';
}
</style>

效果：