Skokowe wczytywanie się czcionki @font-face

Start

Blog

Dowolne czcionki na stronie internetowej

Skokowe wczytywanie się czcionki @font-face - rozwiązanie

Wpisany przez Joomla! Fan Sobota, 02 Październik 2010 23:11

(1 głos, średnia ocena 4.00 na 5)

Font-Face - alternatywne czcionki w Joomla Od niedawna zacząłem stosować technikę @font-face do wyświetlania niestandardowych czcionek na stronach internetowych, które wdrażam. Wcześniej stosowałem sIFR'a oraz Cufon'a. Przy @font-face bardzo irytujący jest moment przeskoku ze zwykłej czcionki do czcionki generowanej za pomocą @font-face. Dzieje się to w momencie wczytywania się strony w przeglądarce Firefox. Co ciekawe, nie zauważyłem tego ani w Operze, Chrome oraz Internet Explrorerze. W innych mniej popularnych przeglądarkach stron WWW nie sprawdzałem.

Wracając do @font-face i Firefoxa, jest sposób na wyeliminowanie przeskoku w momencie wczytywania się (prawidłowo powinienem pewnie napisać: renderowania) naszej niestandardowej czcionki. Wystarczy w nagłówku naszej strony internetowej (w sekcji <head></head>) wstawić poniższy skrypt, który wyeliminuje irytujący przeskok czcionki:

<script type="text/javascript">
(function(){
 // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
 var d = document, e = d.documentElement, s = d.createElement('style');
 if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
 s.textContent = 'body{visibility:hidden}';
 e.firstChild.appendChild(s);
 function f(){ s.parentNode && s.parentNode.removeChild(s); }
 addEventListener('load',f,false);
 setTimeout(f,3000); 
 }
})();
</script>

Tags: font-face | niestandardowe czcionki | szablony joomla | templatki | templatki joomla

Set as favorite

Bookmark

Email This

Komentarze (0) Add Comment

Subskrybuj kanał RSS dla komentarzy

Napisz Komentarz

UWAGA: Jeśli chcesz napisać komentarz po raz pierwszy, zapoznaj się z zasadami komentowania.

Skokowe wczytywanie się czcionki @font-face - rozwiązanie

Menu główne

Sponsorzy bloga

Najwyżej ocenione artykuły

Komentarze

Tagi

Nowości

Popularne

O blogu