【问题标题】：How to load and override Google Web Fonts subsequently?随后如何加载和覆盖 Google Web 字体？
【发布时间】：2015-04-21 05:30:22
【问题描述】：

加载一组 Google Web 字体后，如何加载新字体集以覆盖先前加载的字体集（假设使用旧字体的元素将指向较新的字体系列）。

目标是通过在游戏配置弹出窗口中复制一个或多个标识符 (Name:Size:Charset) 为设计人员提供一种选择任何 Google 网络字体的方法（这会在运行时与游戏交互），让用户调整各种参数）。

例子：

加载Lato:900:latin。
等待用户输入要加载的新字体（在文本输入中）。
当用户单击“确定”时，加载新的 Web 字体 + 触发新的 onComplete 回调。

我尝试重用 Google JS sn-p，但第一次之后的任何调用似乎都不会触发“fontloading”回调（不确定是否失败）。

var loadWebFont = function(fontFamilies, onComplete) {
    //Ensure 1st argument is of Array[String] type:
    if(!_.isArray(fontFamilies)) fontFamilies = [fontFamilies];
    else fontFamilies = fontFamilies.concat();

    //Get rid of blank/null fonts:
    for(var f=fontFamilies.length; --f>=0;) {
        var theFont = fontFamilies[f];
        if(!theFont || $.trim(theFont)==="") {
            fontFamilies.splice(f, 1);
        }
    }

    //Setup the font families Object and "fontloading" callback on window object.
    var loadCount = fontFamilies.length;
    window.WebFontConfig = {
        "fontloading": function(a, b) {
            if((--loadCount)<=0) onComplete();
        },
        google: { families: fontFamilies }
    };

    //Remove previously attached WebFonts <script> tag:
    if(window._WF_SCRIPT) {
        console.log("Removing previous Google Web Fonts node: " + window._WF_SCRIPT);
        window._WF_SCRIPT.parentNode.removeChild(window._WF_SCRIPT);
        window._WF_SCRIPT = null;
    }

    console.log("Loading fonts: " + fontFamilies);

    var wf = window._WF_SCRIPT = 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);
};

【问题讨论】：

您是否检查了控制台是否存在任何可能的错误，并检查了网络以查看请求是否通过。 @bigp
能否请您尝试从更高层次的角度解释您尝试做的事情。你想要的最终结果是制作一个基于用户文本输入来预览各种谷歌字体的网络应用程序吗？
@Nooneknows：将目标添加到问题中。
@DurgeshChaudhary：是的，看起来 webfont.js 文件已成功加载。我想我找到了它不起作用的原因，很快就发布了答案。

标签： javascript loading google-webfonts script-tag

【解决方案1】：

第一次加载 WebFont API 时，webfont.js 文件在 window.WebFont 上定义了一个顶级对象。这包含加载字体、添加样式表的 DOM 操作以及（从外观上看）一些跨浏览器兼容性检查的方法。

如果您再次尝试重新加载此脚本，它似乎会重用第一个 window.WebFont 对象，因此会忽略您传递给它的任何新字体。

解决方案：

取消window.WebFont 及其生成的

以下是对上述脚本的更正：

window.loadWebFont = function(fontFamilies, onComplete) {
    if(window._WEBFONT_SCRIPT) {
        console.log("Removing previous Google Web Fonts elements.");
        window._WEBFONT_SCRIPT.parentNode.removeChild(window._WEBFONT_SCRIPT);
        window._WEBFONT_SCRIPT = null;

        if(window._WEBFONT_CSS) {
            window._WEBFONT_CSS.parentNode.removeChild(window._WEBFONT_CSS);
            window._WEBFONT_CSS = null;
        }
        window.WebFont = null;
    }

    if(!_.isArray(fontFamilies)) fontFamilies = [fontFamilies];
    else fontFamilies = fontFamilies.concat();
    for(var f=fontFamilies.length; --f>=0;) {
        var theFont = fontFamilies[f];
        if(!theFont || $.trim(theFont)==="") {
            fontFamilies.splice(f, 1);
        }
    }
    var loadCount = fontFamilies.length;
    window.WebFontConfig = {
        "fontloading": function(a, b) {
            if((--loadCount)<=0) {
                var css = $('link[href^="http://fonts.googleapis.com/"]');
                //Store the <link> element, not the jQuery/Zepto result
                window._WEBFONT_CSS = css[0];
                onComplete();
            }
        },
        google: { families: fontFamilies }
    };

    var wf = window._WEBFONT_SCRIPT = 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);
};

【讨论】：