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

Я читал сообщения об этом и до сих пор не могу найти ответ. Кто-нибудь понял, как предварительно загружать шрифты, чтобы остановить мерцание/задержку?

Приветствия. Erik

ОТВЕТЫ

Ответ 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

Стив Судерс также имеет отличную статью о своем блоге с высокоэффективными веб-сайтами: @font-face и производительность