项目场景:
首先:我们按照正常步骤引入。
1、在App.vue中引入:
@font-face {
font-family: 'Branding-BoldItalic'; //自定义的,一会儿用这个
src: url('~@/static/font/Branding-BoldItalic.woff2.ttf');
}
2、在页面的CSS中使用:
text {
font-family: Branding-BoldItalic; //用刚刚自定义的
}
3、效果图:
a、H5页面上:
b、微信开发者工具里面:
问题描述
解决:把引入格式转换一下就可以生效了:
1、首先进入这个网站:https://transfonter.org/
2、把ttf等文件导入,点Add fonts那里;
3、转换(点上面Convert);
4、把下载下来的CSS文件放到项目里;
5、在App.vue的style中引入:
@import './static/css/Branding-BoldItalic.css';
6、再去使用就行了。(注意使用时要和你的css文件里面的名称一致)