侧边栏壁纸
  • 累计撰写 27 篇文章
  • 累计创建 9 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

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

仓鼠
2024-04-15 / 0 评论 / 0 点赞 / 17 阅读 / 1511 字 / 正在检测是否收录...

前端如何解决字体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'),
}

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

0

评论区