完成外部字体后执行JavaScript

Question

我正在使用Google字体，并且在$（window）.load（function（）{...中有一些文本显示“正在呈现loading”的函数执行里面的代码$（窗口）.load（函数（）{除了具有CSS属性的字体使用谷歌字体文本之前在页面上。

我如何克服这个问题？

Answer 1

可以使一个非异步（同步？）AJAX调用以确保字体已下载：

xmlhttp.open('GET','path/to/needed/font',false); 

T帽子会做你所要求的。但是，说实话，这不是最好的用户体验。相反，我会推荐制作“加载”文本的小型SVG图像，并仅显示该图像。 SVG很不错，因为您可以将代码包含在HTML中，以便您知道它已下载。

如果您无法使用SVG，或者无论出于何种原因只喜欢JPG或PNG，您可以将图像数据嵌入页面：Embedding Base64 Images。

最后，如果你不关心Internet Explorer，然后你真的不想使用图像的话，我想你可以只是把数据链接到@font-face SRC。例如：http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/