解决方案：

Question

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

目标是为设计师提供一种方式，通过在游戏配置弹出窗口中复制一个或多个标识符（Name:Size:Charset）来选择任何Google Web字体（这与游戏相互作用）在运行时，让用户调整各种参数。）

示例：

加载Lato:900:latin。
等待用户输入要加载的新字体（在文本输入中）。
当用户点击＆＃34;确定＆＃34;时，加载新的网络字体+触发新的 onComplete 回调。

我尝试过重复使用Google JS代码段，但是在第一次调用之后的所有调用似乎都没有触发＆＃34;字体加载＆＃34;回调（不确定是否失败）。

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及其生成的＆lt;脚本＆gt; +＆lt; link rel =＆＃34; stylesheet＆＃34;＆gt;代码

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

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

如何加载和覆盖Google Web Fonts？

1 个答案:

解决方案：