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'), /* Modern Browsers */
         url('./songti.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

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

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