完全加載外部字體后執行JavaScript

Question

我使用的是Google字體，我在$（window）.load（function（）{...中包含代碼，其中一些文字表示“正在加載...”，然后在執行$（window）中的代碼之前，所有內容都會呈現在頁面上.load（function（）{除外，但具有CSS屬性字體以使用Google字體的文本。

我該如何克服？

Answer 1

您可以進行非異步（同步？）AJAX調用，以確保下載了字體：

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

這將滿足您的要求。 但是，老實說，這不是最佳的用戶體驗。 相反，我建議為“ Loading”文本制作一個小的SVG圖像，然后僅顯示該圖像。 SVG很不錯，因為您可以將代碼包含在HTML中，以便知道它已下載。

如果您不能使用SVG，或者出於某種原因僅喜歡JPG或PNG，則可以將圖像數據嵌入到頁面中： Embedding Base64 Images 。

最后，如果您不關心Internet Explorer，並且確實不想使用圖像，那么我想您可以將數據URL放入@font-face src中。 例如： http : //robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/