vue 引入字体文件

1. 以 YouSheBiaoTiHei 字体为例：
2. 下载字体地址：http://www.downcc.com/font/518114.html
3. 字体文件下载成功，后放到项目文件中

 

 

 

 

 

 

　　4.　创建  YouSheBiaoTiHei.css    

 

 

 

 

 

 

 

//YouSheBiaoTiHei.css文件代码
@font-face {
    /*给字体命名*/
    font-family: 'YouSheBiaoTiHei';
    /*引入字体文件*/
    src: url('./YouSheBiaoTiHei.ttf');
    font-weight: normal;
    font-style: normal;
}

5. 在 main.js 中引用

//main.js文件代码
//引入字体
import '../src/assets/css/YouSheBiaoTiHei.css';

6. 在页面中使用

.label-font{
  font-family: YouSheBiaoTiHei;
}