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

1、下载字体

此处下载的字体为HYXinHaiXingKaiW.ttf

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

vue-cli3.0项目中使用ttf字体_第1张图片

3、font.css中配置字体

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

4、main.js中引入字体

vue-cli3.0项目中使用ttf字体_第2张图片

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

字体测试代码

 

 

 

你可能感兴趣的:(vue,vue.js,css)