Preload @Font-Face Fonts для остановки флекера/задержки Firefox

Ответ 1

Борьба с FOUT в Firefox: Firefox начинает повторное рендеринг текстового события AFTER window.load. Итак, что я сделал, это скрыть контент, такой как Paul Irish, но ПОСЛЕ window.load я все еще жду 200 миллисекунд (чтобы дать время FF для реального рендеринга), а затем покажет страницу.

На моем сайте много изображений, поэтому, чтобы ускорить это, я сначала отправляю страницу без содержания, а затем получаю контент с помощью ajax-вызова. Это большая работа, чтобы удовлетворить FF, но результаты хорошие.

Это мой paul irish вариант, обратите внимание, что вместо отрицательного текстового отступа используется вместо видимости, чтобы быстрее обслуживать посетителя по меньшей мере:

    <script>
    (function(){
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
   // s.textContent = 'body{visibility:hidden}';
    s.textContent = 'body{text-indent:-9999px}';
    e.firstChild.appendChild(s);
    function f()
    { 
    var ffrendertime = setTimeout ( function(){s.parentNode && s.parentNode.removeChild(s)} , 200 ); 
    }
    addEventListener('load',f,false);
    setTimeout(f,2000); 
  }
})();
    </script>

Ответ 2

@Erik,

Было много обсуждений по этой проблеме, которые Пол Ирланд называет FOUT (вспышка неравномерного текста). Существует множество способов ограничить это тем, что

1 Поместите CSS в самую верхнюю часть страницы перед любыми тегами script

2 Минимизация размера файла шрифта

3 Кэширование браузера с далеким будущим истекает заголовки

4 Gziping ваш css и файл шрифта (woff не может быть gzipped)

У Пола Ирландии есть отличная статья об этом: Борьба с @font-face FOUT

Ответ 3

Здесь решение обнаружения, когда веб-шрифты загрузились без использования таймеров вообще

http://smnh.me/web-font-loading-detection-without-timers/