作为前端应该都会遇到一个问题,在做界面UI时,常常会有些字体的样式跟设计图的样式不同,即使代码一样,通过和同事小伙伴百度,发现浏览器并不支持某些字体,是需要从外部引入的,下面简单记录一下自己的如何实现的不同的字体样式的:

1.将外部字体下载放在存放静态资源的文件夹中,我是直接问UI设计师要的字体文件

2.可以直接放在App.vue中全局使用,我是创建了一个scss文件专门用来引入字体

 

@font-face{
	font-family: "Bahnschrift-BoldSemiCondensed";
	src:url("~@/static/font/BAHNSCHRIFT.TTF");
}

 3.在文件中使用

 

此时就可以查看界面字体样式已发生变化

如有问题,欢迎留言!!!

 

Logo

前往低代码交流专区

更多推荐