前端如何解决字体font加载过慢，文字不显示问题

问题：

之前使用字体时有个bug，就是在加载字体时,如果字体还没加载出来时。会出现文字一片空白的情况。

在加载完成后才会出现

解决方案

使用webfontloader JS库地址: github：https://github.com/typekit/webfontloader

js代码

WebFont.load({
	custom: {
		families: ['btfFont'],
		urls: ['staticResource/css/font.css']
	},
	fontactive: function(fontFamily, fontDescription) {
		console.log('🙂')
		$('.font-content').css('font-family', "'btfFont','Microsoft YaHei', 'PingFang SC', Arial, 'Helvetica Neue', Helvetica, sans-serif");
	}
});

css代码

@font-face {
	font-family: 'btfFont';
	src: url('../font/13.woff2') format('woff'),
}

核心思想：通过监听字体加载情况，只有在字体加载完成后，才使用字体