解决网站引入web字体加载延迟的奇技淫巧

主要思路:

先用浏览器自带Microsoft YaHei占位,缓解网站字体不显示的尴尬;
页面加载完时,用引入字体的样式替换掉原始的样式

web字体只有在调用这个字体的时候才会加载,对于字体包很大很大的字体来说是很坑爹的
最关键的一点就是:
在页面里面写一个隐藏元素(写一个元素引用你需要的web字体,这个隐藏元素最好写在头部,优先加载,当这个隐藏元素加载时,这个web字体也就在加载了)

定义原始样式

解决网站引入web字体加载延迟的奇技淫巧_第1张图片
image.png

页面加载完替换原始样式

解决网站引入web字体加载延迟的奇技淫巧_第2张图片
image.png

隐藏元素占位

解决网站引入web字体加载延迟的奇技淫巧_第3张图片
image.png

解决网站引入web字体加载延迟的奇技淫巧_第4张图片
image.png

试试吧,避免了页面加载引入字体时没有字显示的尴尬场面。

你可能感兴趣的:(解决网站引入web字体加载延迟的奇技淫巧)