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;
}