vue引入字体文件踩坑

vue引入字体文件的正常步骤走一遍
1 . 下载字体文件并放入项目中

2 . 新建一个文件，font.css（不新建也行，.less和.scss也行）只要能引入到单页面或者main.js中就可以
注意！！！：这个css文件一定要和字体文件在同级目录下，要不然可能会出现字体不起作用的情况
font.css文件里就这样写就完事了，压根不用写什么format后缀

@font-face {
  font-family: 'D-DIN';
  src: url('D-DIN.ttf');
  font-weight: normal;
  font-style: normal;
}

带format后缀，不同后缀的字体文件，需要配置的format后缀都不一样
文字后缀名必须小写

@font-face {
  font-family: 'D-DIN';
  src: url('D-DIN.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

3 . 引入并使用即可
font-family: "D-DIN"后面的字体名，加不加引号都一样