Googleのウェブフォントがいつ表示され、ページに表示されるのかを検出するにはどうすればよいですか？

Question

私のページのフォントがGoogleに切り替わるとすぐに行動を引き起こす必要があります。 （私はCSSモードを使用しています） フォント切り替え時に発生したDOMイベントはありますか？

Answer 1

これが必要なのかどうかは不明ですが、試してみることもできます。 WebFont Loaderを使用している場合は、それを追跡できます。

WebFont Loaderはあなたに フォントAPIが提供するGoogleウェブよりもフォントの読み込みをより詳細に制御できますJavaScriptライブラリ です。 WebFontローダーでは、複数のウェブフォントプロバイダ を使用することもできます。 GoogleとTypekitが共同開発しました。

あなたはloading()、active()のようないくつかのコールバックを使用してそれを行うことができ、 fontactive(fontFamily, fontDescription) e.t.c.またはいくつかのクラス 属性をチェックしてください。

Here it is、それがあなたを助けてくれることを願っています。

Answer 2

デビッド・ウォルシュが、ここでGoogleのWebfonts APIを使用するためのガイドを持っていますhttp://davidwalsh.name/google-fonts-api

は、ここで彼のポストからの例です： `WebFontローダーライブラリのactive`イベントを使用して

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