Как предотвратить мерцание с дублированием определения веб-шрифта?

Question

Предположим, у меня есть веб-шрифт, определенный в каком-то @font-face правиле CSS. Во время выполнения я хочу добавить больше CSS через JS. Я не говорю о FOUT во время загрузки .

Так уж получилось, что мой фреймворк иногда добавляет то же самое @font-face правило . Оказывается, это заставляет Firefox и Chrome повторно загружать (или загружать кешированный диск) файл шрифта, и это вызывает мерцание.

Демонстрация: http://jsfiddle.net/Hg9Pc/ _{(Firefox; этот конкретный случай отлично работает в Chrome)}

Есть ли способ предотвратить это мерцание, кроме "просто не делай этого"? Сумасшедшие заголовки кэша или что-то?

Answer 1

Не думаю, что вы можете предотвратить мерцание, если фактически вызовете еще один @font-face вызов.Тем не менее, кажется, что вы могли бы сделать одну из следующих двух вещей:

1. Пропустите javascript и удалите это дополнительное определение перед загрузкой его на страницу (этопо общему признанию, это довольно трудная задача, я думаю, но не невозможная).

2. Если вы можете, определите исходную реализацию с другим именем шрифта.Например, исходный шрифт может быть определен как My Arial, поэтому позже, когда Arial (я знаю, что вы не использовали бы @font-face для Arial, это только для примера), загружается через каркас (оба из которых указывают натот же файл для определения), мерцание не должно появляться, потому что страница на самом деле не пытается заменить определение My Arial.Проблема с этим будет в том случае, если когда-либо будет экземпляр, в котором вы делаете хотите, чтобы он перезаписывал, не будет.