Preload @Font - czcionki twarzy, aby zatrzymać migotanie/opóźnienie Firefoksa

Czytałem posty na ten temat i nadal nie mogę znaleźć odpowiedzi. Czy ktoś wie, jak wstępnie załadować czcionki, aby zatrzymać migotanie/opóźnienie?

Zdrówko. Erik

Author: skaffman, 2010-08-01

3 answers

Walka z FOUTEM w Firefoksie : Firefox rozpoczyna ponowne renderowanie tekstu po oknie.załaduj Zdarzenie. Więc to, co zrobiłem, to ukryłem zawartość, tak jak Paul Irish, ale po oknie.load I still wait 200 milisec( to give FF time for the real rendering), and then show the page.

Moja strona ma dużo zdjęć, więc aby to przyspieszyć, najpierw wysyłam stronę bez zawartości, a następnie otrzymuję zawartość za pomocą połączenia ajax. To dużo pracy, aby zadowolić FF, ale wyniki są dobrze.

To jest mój paul irlandzki wariant, Uwaga używam negative text-indent zamiast widoczności, aby służyć odwiedzającemu przynajmniej układ szybciej:

    <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>
 15
Author: gertov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-18 13:17:50

@Eryk,

Było wiele dyskusji na ten temat, który Paul Irish nazywa FOUT (flash of unstyled text). Istnieje wiele sposobów na ograniczenie tego przez

1 umieszczanie CSS na samej górze strony przed znacznikami skryptu

2 minimalizacja rozmiaru pliku czcionki

3 buforowanie przeglądarki z far future expires headers

4 Gzipowanie pliku css i czcionek (woff nie może być gzipowany)

Paul Irish ma świetny artykuł na ten temat: walka z @ font-face FOUT

Steve Souders ma również świetny artykuł na swoim blogu High Performance Websites: @ font-face and performance

 18
Author: Chris_O,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-09-04 21:14:13

Oto rozwiązanie do wykrywania, kiedy web-fonts są ładowane bez konieczności korzystania z timerów w ogóle

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

 0
Author: ohadpr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-02 19:55:55