頁面刷新后@fontface無法正確加載

Question

我有一個頁面，它使用通過@ font-face加載的字體在畫布上繪制字符串。

為了等待字體加載，我使用了： https : //stackoverflow.com/a/11688948/746269

在Firefox中效果很好，並且在第一次打開頁面時在chrome / opera中工作，但是一旦刷新頁面並嘗試運行相同的代碼，它最終將以默認的“未加載字體”字體進行繪制，直到運行第二次編碼。

除非我打開一個新窗口或右鍵單擊“刷新”並選擇“空緩存和硬重載”，否則它將始終在第一次失敗。

我認為在刷新之間可能存在一些變量，但是盡管所有值都正確，但當我逐步執行操作時，它會繪制默認字體。

我不能只是告訴客戶不要刷新頁面，也根本看不到解決方案。 任何幫助將不勝感激 ：）

Answer 1

我通過將其添加到html中來解決了這一問題。發現webkit加載的字體與firefox和IE不同，它們是在html中首次使用時加載的。

<div style="font-family: MyFontName; visibility: hidden; height: 0px; width:0px;">a</div>

Answer 2

我遇到了同樣的問題，我只是通過引用頁面中的ModernizerJS腳本來解決它。