Vue项目中使用自定义字体样式方式

@font-face {
    font-family: 'ZI DING YI'; 
    src: url('ZI DING YI.TTF');
    font-weight: nORMal;
    font-style: normal;
}

<style lang="scss">
  @import './assets/font/font.css';
  #app {
    font-family: 'PingFang-RE';
    font-weight: 400;
  }
</style>

//目录结构
├──node_modules
├──public
├──src
├    ├──api 
├    ├──assets    //静态资源
├        ├──images 
├        ├──font   //存放 公共字体的文件夹
├            ├──common  //存放字体的文件夹
├                ├──weiruan.ttf
├                ├──chanGCheng.ttf
├                ├──songti.ttf
├                └── ......
├            └──index.css
├        └── css 
├    ├──components
├    └── views
├ ......

    
    @font-face {
      font-family: 'weiruan';
      src:url('./weiruan.otf') format('otf'), 
         url('./changcheng.woff') format('woff'), 
         url('./songti.ttf')  format('truetype'); 
    }

//main.js
import './assets/font/index.css' //全局使用

    div {
          font-family: weiruan; //使用字体
      }