vue使用外部字体文件

1、新建字体文件夹并设置字体css

/**font.css**/

@font-face {
  font-family: 'font1';
  src: url("./font1.ttf");
}

@font-face {
  font-family: 'font2';
  src: url("./font2.ttf");
}

@font-face {
  font-family: 'font3';
  src: url("./font3.ttf");
}

@font-face {
  font-family: 'font4';
  src: url("./font4.ttf");
}

2、main.js引入为公共资源

//main.js

import "@/assets/font/font.css"

3.在任何地方即可使用字体了

    
    <!--html/vue-->

    <div style="font-family: font1">字体1</div>
    <div style="font-family: font2">字体2</div>
    <div style="font-family: font3">字体3</div>
    <div style="font-family: font4">字体4</div>

避大坑！！！

字体文件的后缀一定要是小写，如果是大小的文件后缀手动修改为小写

亲趟大坑，找了俩小时原因