CSS加载字体慢的解决办法


在页面加载CSS时,如果CSS中导入了第三方字体,而字体文件又很大,可能会造成页面加载很慢,常常需要花费十几秒甚至几十秒,对用户而言,如果长时间对着一个空白页,可能就会等不到页面加载完毕而关闭页面了。我们可以这样,在CSS中先定义系统默认的一种字体,如:微软雅黑,在页面加载完后再利用JS改成我们需要的字体,这样,即使JS加载字体的时间再长,但用户已经看到了页面的内容,就不会一直空等直到放弃了。

可以使用下面的函数代码:

规定CSS字体调用

调用JS代码

如果其它元素还使用自定义字体,那么你要先用 Javascript 找到此元素,然后调用函数,例如:

loadFont("myfont", document.getElementById("main"));

经过上面这样做以后,页面的文字会一开始显示微软雅黑,在页面加载完毕后,一下再变成我们需要的字体,既不影响整个系统的美观,也不会让用户空等直到失去耐心。