Предварительная загрузка шрифтов @ Font-Face для остановки мерцания / задержки Firefox - PullRequest
12 голосов
/ 01 августа 2010

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

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

Ответы [ 3 ]

18 голосов
/ 05 сентября 2010

@ Эрик,

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

1 Помещение CSS в самый верх страницы перед любыми тегами скрипта

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

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

4 Распаковка ваших css и файлов шрифтов (woff не может быть распакован)

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

Стив Соудерс также написал отличную статью в своем блоге High Performance Websites: @ font-face and performance

15 голосов
/ 18 декабря 2010

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

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

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

    <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>
0 голосов
/ 02 апреля 2013

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

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

...