前端如何引入外部字体

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

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

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

 

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

 3.在文件中使用

 

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

如有问题，欢迎留言！！！