Jak wykryć, czy czcionka internetowa Google jest gotowa i wyświetlana na stronie?

Question

Muszę wywołać akcję, gdy tylko czcionki na mojej stronie zmienią się na Google. (Używam trybu css) Czy jest jakieś zdarzenie DOM uruchamiane przy przełączaniu czcionek?

Answer 1

Nie wiem, czy to jest to, czego potrzebujesz, ale możesz spróbować. Jeśli używasz WebFont Loader, to możesz go śledzić.

WebFont Ładowarka jest biblioteką JavaScript który daje większą kontrolę nad załadunkiem czcionki niż Google Web Fonts API zapewnia . Program WebFont Loader umożliwia także korzystanie z wielu dostawców internetowych czcionek. Został opracowany wspólnie przez Google i Typekit.

Można to zrobić za pomocą kilku wywołań zwrotnych jak loading(), active(), fontactive(fontFamily, fontDescription) itd. lub sprawdzanie niektórych atrybutów klasy .

Here it is, mam nadzieję, że ci to pomoże.

Answer 2

David Walsh ma przewodnik używając API Google Czcionki Webfonts tutaj: http://davidwalsh.name/google-fonts-api

Oto przykład z jego postu:

WebFontConfig = { 
    google: { 
     families: [ 'Tangerine', 'Cantarell' ] 
    }, 
    /* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */ 
    loading: function() { 
     // do something 
    }, 
    /* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ 
    fontloading: function(fontFamily, fontDescription) { 
     // do something 
    }, 
    /* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ 
    fontactive: function(fontFamily, fontDescription) { 
     // do something 
    }, 
    /* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ 
    fontinactive: function(fontFamily, fontDescription) { 
     // do something 
    }, 
    /* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */ 
    active: function() { 
     // do something 
    }, 
    /* Called if the browser does not support web fonts or if none of the fonts could be loaded. */ 
    inactive: function() { 
     // do something 
    } 
}; 

/* async! */ 
(function() { 
var wf = document.createElement('script'); 
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
wf.type = 'text/javascript'; 
wf.async = 'true'; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(wf, s); 
})();