vue-cli3.0项目中使用.ttf字体

1、下载字体
此处下载的字体为HarmonyOS_Sans_SC_Medium

2、将下载好的字体放到项目的assets下，同时新建font.css文件

3、font.css中配置字体

//多个字体可多个引入
@font-face {
  font-family: 'HarmonyOS_Sans_SC_Medium';
  src: url('../fonts/HarmonyOS_Sans_SC_Medium.ttf');
  font-weight: normal;
  font-style: normal;
}

4、main.js中引入字体

import './assets/css/font.css'

5、在需要改变字体的地方使用

<div class='test'>字体测试代码</div>
<style scoped>
    .test {
        font-family: 'HYXinHaiXingKaiW';
    }
</style>