Wie kann ich feststellen, ob eine Google Web-Schriftart bereit und auf der Seite angezeigt wird?

Question

Ich muss eine Aktion auslösen, sobald die Schriftarten auf meiner Seite auf Google umstellen. (Ich benutze den CSS-Modus) Gibt es ein DOM-Ereignis bei der Schriftart Schalter ausgelöst?

Answer 1

Nicht sicher, ob das ist, was Sie brauchen, aber Sie können es versuchen. Wenn Sie WebFont Loader verwenden, dann können Sie es verfolgen.

Der WebFont Loader ist eine JavaScript-Bibliothek , dass Sie mehr Kontrolle über die Schriftart Laden als die Google Web Fonts API gibt. Mit dem WebFont Loader können Sie auch mehrere Web-Font-Anbieter verwenden. Es wurde von Google und Typekit mitentwickelt.

Sie können es einige Rückrufe wie loading() verwenden, active(), fontactive(fontFamily, fontDescription) e.t.c. oder einige Klassen Attribute überprüfen.

Here it is, hoffe, es wird dir helfen.

Answer 2

David Walsh hat eine Führung, die Google Webfonts API hier zu verwenden: http://davidwalsh.name/google-fonts-api

Hier ist ein Beispiel von seinem Posten:

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