Jak sprawdzić, kiedy zastosowano font-face

Obecnie buduję firmową stronę internetową dla klienta, który intensywnie używa niestandardowych czcionek.

Na JQUERYS DOM-ready robię obliczenia rozmieszczenia, aby dowiedzieć się, gdzie niektóre wyskakujące menu z dynamiczną szerokością i wysokością powinny być umieszczone na podstawie ich dynamicznej zawartości.

Te obliczenia nie powiodą się, ponieważ DOM-ready jest wywoływany przed zastosowaniem font-face, a więc szerokości i wysokości są nieprawidłowe.

W tej chwili (dla prototypu) robię obliczenia 500ms po DOM-gotowy do złagodzenia tego problemu, ale to nie może wejść do produkcji z oczywistych powodów.

Problem został zaobserwowany w najnowszych przeglądarkach Firefox i chrome. IE 8 chyba nie ma problemu, ale potem dom-ready odpala się dość późno, więc opóźnienie jest chyba wbudowane:)

Oczekiwanie na zdarzenie load nie jest opcją, więc moje pytanie do ciebie jest takie:

Czy istnieje niezawodny sposób między przeglądarkami, aby wykryć, kiedy zastosowano font-face?

Author: Martin Jespersen, 2011-07-13
Source

2 answers

Znalazłem rozwiązanie po zastanowieniu się, dlaczego IE nie cierpi na ten problem.

Firefox i Chrome / Safari wywołują Zdarzenie DOMContentLoaded przed zastosowaniem font-face, powodując tym samym problem.

Rozwiązaniem jest, aby nie słuchać DOMContentLoaded, ale zamiast tego przejść oldschool i posłuchać onreadystatechange i poczekać aż document.readyState === 'complete', który jest zawsze uruchamiany po zastosowaniu font-face ( o ile mogę stwierdzić po moich testach) - co oczywiście zawsze dzieje się w IE, ponieważ nie obsługuje DOMContentLoaded.

Więc w zasadzie można w jQuery wywinąć własne Zdarzenie o nazwie fontfaceapplied - może powinno być wbudowane;) 

document.onreadystatechange = function() {
    if (document.readyState === 'complete') 
        $(document).trigger('fontfaceapplied');
};

Ciekawostka: Opera robi to w prawo i czeka na wywołanie DOMContentLoaded, aż zostanie zastosowana font-face.

 54
Author: Martin Jespersen,
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
2012-11-19 02:09:07

Ustawienie Funkcji do wyzwalania po upływie czasu 200ms rozwiązuje ten problem podczas korzystania z czcionek Google.

Jest zauważalny skok, ale zazwyczaj jest na równych wysokościach, dla purystów może nie jest to idealne rozwiązanie, ale działa cross browser.

 1
Author: chim,
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
2014-03-28 11:17:31