完成外部字體後執行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/