Come posso rilevare quando un font Web di google è pronto e visualizzato nella pagina?

Question

Devo attivare un'azione non appena i caratteri nella mia pagina passano a Google. (Sto usando la modalità css) C'è qualche evento DOM attivato all'interruttore font?

Answer 1

Non so se questo è quello che ti serve ma puoi provarlo. Se si utilizza WebFont Loader, è possibile che sia possibile rintracciarlo.

Il WebFont Loader è una libreria JavaScript che ti dà più controllo sul carico carattere del Web di Google Fonts API fornisce. Il caricatore di WebFont consente inoltre di utilizzare più provider di font web . È stato sviluppato in collaborazione con Google e Typekit.

È possibile farlo utilizzando alcuni callback come loading(), active(), fontactive(fontFamily, fontDescription) e.t.c. o il controllo attributi qualche classe.

Here it is, spero che ti aiuto.

Answer 2

David Walsh ha una guida per utilizzando l'API di Google webfonts qui: http://davidwalsh.name/google-fonts-api

Ecco un esempio dal suo incarico:

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); 
})();