Javascript 如何检测google web字体何时准备就绪并显示在页面中？

当我的页面中的字体切换到谷歌的字体时，我需要触发一个动作。 （我正在使用css模式）

---

字体开关是否触发了任何DOM事件？

不确定这是否是您需要的，但您可以尝试一下。如果您使用WebFont Loader，则可能您可以跟踪它

WebFont加载程序是一个JavaScript库 这比谷歌网页更能控制字体加载 API提供的字体。WebFont加载器还允许您使用多个 网络字体提供商。它是由谷歌和Typekit共同开发的

您可以使用一些回调来完成此操作，如

load（）

，

active（）

，

fontactive（fontFamily，fontDescription）

e.t.c.或检查某些类别 属性

---

，希望对您有所帮助。

David Walsh在此处提供了使用Google Webfonts API的指南：

以下是他帖子中的一个例子：

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

---

使用WebFont Loader库的

active

事件似乎是最正确的方法。在css模式下使用window.onload事件也可以正常工作。WebFont loader不适用于4.2版之前的iOS版本。这意味着例如iPad（1）不受支持。