vue项目引入外部字体

1.src下创建文件夹common,在common文件下创建一个文件夹font-face和一个font-face.css
2.在文件夹font-face放入下载好的字体
3.font-face.css中引入字体并且重命名
@font-face {  
  /* 重命名字体 */
  font-family: 'SourceHanSans-Bold';  
  /* 引入字体 */
  src: url('./font-face/SourceHanSans-Bold.otf'); 
}
@font-face {  
  /* 重命名字体 */
  font-family: 'SourceHanSans-Heavy';  
  /* 引入字体 */
  src: url('./font-face/SourceHanSans-Heavy.otf'); 
}
4.在main.js中全局引入
import '@/common/font.css';
5.即可在项目中使用字体