如何防止重複webfont定義閃爍？

Question

假設我在一些@font-face CSS規則中定義了一個webfont。在運行時我想通過JS添加更多的CSS。我不是在說FOUT at load time。

它恰巧發生了，我的框架偶爾再次添加非常相同的@font-face規則。原來，這使Firefox和Chrome嘗試重新下載（或加載磁盤緩存）字體文件，並導致閃爍。

演示：http://jsfiddle.net/Hg9Pc/_{（火狐，這個特殊的情況下，在Chrome中正常工作）}

是否有辦法防止除了「只是不去做」這個閃爍等？ 瘋狂的緩存頭或什麼？

Answer 1

我不認爲你可以防止閃爍，如果你實際上調用另一個@font-face調用。但是，好像你也許可以做到以下兩種情況之一：

1. 有JavaScript的篩選，並刪除了該加載到頁面（之前更加清晰，這將無可否認的是一個相當困難的任務我認爲，但不是不可能的）。

2. 如果可以，請用不同的字體名稱定義原始實現。例如，原始字體可能被定義爲My Arial，所以稍後當Arial（我知道你不會使用@font-face作爲Arial，這僅僅是一個例子）通過框架加載（兩者都指向同一個文件來定義），閃爍不應該發生，因爲頁面實際上並未試圖取代My Arial定義。與此問題將是如果有的情況下，你做想要它覆蓋，它不會。