javascript - 随后如何加载和覆盖 Google Web Fonts？

Question

加载一组 Google 网络字体后，如何加载一组新字体来覆盖之前加载的一组(假设使用旧字体的元素将指向较新的字体系列)。

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

示例:

1. 加载Lato:900:latin。
2. 等待用户输入要加载的新字体(在文本输入中)。
3. 当用户点击“确定”时，加载新的网页字体 + 触发新的 onComplete 回调。

我尝试重用 Google JS 代码片段，但第一次之后的任何调用似乎都不会触发“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);
};

Answer 1

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

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

解决方案:

取消 window.WebFont 及其生成的 <script> + 标记

以下是对上述脚本所做的更正:

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