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

1、下载字体

此处下载的字体为HYXinHaiXingKaiW.ttf

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

3、font.css中配置字体

  @font-face {

      font-family: 'HYXinHaiXingKaiW';

      src: url('HYXinHaiXingKaiW.ttf');

       font-weight: normal;

      font-style: normal;

    }

4、main.js中引入字体

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

<div class='test'>字体测试代码</div>

<style scoped>

.test {

  font-family: 'HYXinHaiXingKaiW';

}

</style>
posted @ 2020-11-12 14:17  孙同学你好  阅读(665)  评论(0编辑  收藏  举报