Webfont定義を重複してちらつくのを防ぐには？

Question

@font-face CSSルールで定義されたWebFontがあるとします。実行時にJSを使用してさらにCSSを追加したいと思います。私はFOUT at load timeについて話していません。

私のフレームワークでは時々という非常に同じ@font-faceの規則が追加されます。 FirefoxとChromeでフォントファイルを再ダウンロード（またはディスクキャッシュに保存）しようとすると、フリッカーが発生します。

デモ：http://jsfiddle.net/Hg9Pc/_{（Firefoxの、この特定の場合は、Chromeで正常に動作します）}

「ちょうどそれをしない」よりも、このちらつき他のを防止する方法はありますか？ クレイジーキャッシュヘッダーか何か？

Answer 1

実際に別の@font-faceコールを呼び出すと、ちらつきを防ぐことはできません。しかし、あなたが以下の2つのいずれかを行うことができるかもしれないように思える：

1. Javascriptを取捨選択し、余分な定義（ページにロードする前に、これは確かにかなり困難であろうことを削除持っています私は思うが不可能ではない仕事）。

2. 可能であれば、元の実装を別のフォント名で定義します。たとえば、元のフォントはMy Arialと定義されているので、後でArial（私はあなたがArialのために@font-faceを使用しないことを知っています、それは例のためのものです）は、両方とも同じファイルを指し示していますページが実際にMy Arialの定義を置き換えようとしていないため、フリッカーは発生しません。この問題は、あなたがどこにでもインスタンスが存在する場合に発生します。doは上書きしたいと思うでしょう。