Javascript 如何在不下载的情况下将google字体加载到chrome打包的应用程序中？

如何加载谷歌字体，我真的需要下载并打包我在应用程序中使用的每一种字体吗？我尽量避免包装字体，因为字体太多，我的应用程序会很大（它是一个网页编辑器）

>拒绝加载样式表的http://fonts.googleapis.com/css?family=Nunito'因为它违反了以下内容安全策略指令：“style src'self'数据：chrome扩展资源：'不安全内联'”。

我想我可以把它作为一个blob加载，但我不确定是否可以。数据已下载，但没有更改，我尝试了以下方法：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff", true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    console.log("STATE", xhr.readyState);
    if (xhr.readyState == 4) {
        var myfontblob = window.webkitURL.createObjectURL(xhr.response);
        $("<style>").text("@font-face {\
            font-family: 'Nunito';\
            font-style: normal;\
            font-weight: 400;\
            src: '"+myfontblob+"' format('woff');\
        }").prependTo("head");
    }
};
xhr.send();

var xhr=new-XMLHttpRequest（）；
xhr.open（“GET”http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff“，对）；
xhr.responseType=“blob”；
xhr.onreadystatechange=函数（）{
console.log（“STATE”，xhr.readyState）；
if（xhr.readyState==4）{
var myfontblob=window.webkitURL.createObjectURL（xhr.response）；
$（“”）。文本（“@字体面{\
字体系列：“Nunito”\
字体风格：普通\
字体大小：400\
src:“+myfontblob+”格式（'woff'）\
}）。预告书（“标题”）；
}
};
xhr.send（）；

您应该能够修改清单的内容安全策略，以便允许从google字体网站执行以下操作：

"content_security_policy": "script-src 'self' http://fonts.googleapis.com; object-src 'self'"

请参见此处的类似问题：

使用沙箱不是一个好方法 它会使您的应用程序受到攻击和安全问题
这是wy在Chrome应用程序环境中，CSP非常严格

内容安全策略（CSP） 当您使用XMLHttpRequest（）加载某些内容时；就像Mud说的，你必须关注CSP。要了解更多信息，我建议在Google团队的Mike West上发表这篇博文

但是，如果你的目标是谷歌Chrome应用程序，它们与扩展是不同的概念，有不同的规则

在manifest.json中设置权限 在manifest.json for Chrome应用程序中，您不能再直接设置内容安全策略的环境。但是，您可以向要在内容安全策略的白名单中添加的uri添加一些权限。这样做很简单，只需在manifest.json的“permissions”键中添加一个白名单uri数组，如下所示：

{
  "manifest_version": 2,
  "name": "Your Awsome App Name",
  "version": "1",
  "permissions":[
  "http://localhost/",
  "http://youraswomedomain.io/"

  ],
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "minimum_chrome_version": "23",

  "icons":{
      "16": "icon_16.png",
      "128": "icon_128.png"
  }
}

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff", true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    console.log("STATE", xhr.readyState);
    if (xhr.readyState == 4) {
        var myfontblob = window.URL.createObjectURL(xhr.response);
        var newStyle = document.createElement('style');
        newStyle.appendChild(document.createTextNode("\
        @font-face {\
            font-family: Nunito;\
            font-style: normal;\
            font-weight: 400;\
            src: url('" + myfontblob + "') format(woff);\
        }\
        "));
        document.head.appendChild(newStyle);
    }
};
xhr.send();

---

如果使用Angular.js，您将有一个标签：它可以直接与CSP一起使用，开箱即用！你只需要将标签放在身体或你将要对ng应用程序进行分析的地方

我相信这对Chrome打包的应用程序应该有效。您需要将清单（）中的URL列入白名单，然后使用如下所示的JavaScript：

{
  "manifest_version": 2,
  "name": "Your Awsome App Name",
  "version": "1",
  "permissions":[
  "http://localhost/",
  "http://youraswomedomain.io/"

  ],
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "minimum_chrome_version": "23",

  "icons":{
      "16": "icon_16.png",
      "128": "icon_128.png"
  }
}

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff", true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    console.log("STATE", xhr.readyState);
    if (xhr.readyState == 4) {
        var myfontblob = window.URL.createObjectURL(xhr.response);
        var newStyle = document.createElement('style');
        newStyle.appendChild(document.createTextNode("\
        @font-face {\
            font-family: Nunito;\
            font-style: normal;\
            font-weight: 400;\
            src: url('" + myfontblob + "') format(woff);\
        }\
        "));
        document.head.appendChild(newStyle);
    }
};
xhr.send();

---

好吧，如果它是一个blob，你必须通过

xhr.response

@JoshLee访问它，我正试图避免打包字体，因为它们太多了，我的应用程序会很大（它是一个web编辑器）不是扩展问题的重复——因为CSP的工作方式不同。@JoshLee在这里有点不同，我看到shuji要求的是谷歌Chrome中的打包应用，而不是扩展。在谷歌Chrome中，打包的应用程序和扩展是两个不同的概念。我不能让它在谷歌字体上工作，如果有人能做到，请把代码递给我。抱歉。我认为CSP不能在打包的应用程序中以这种方式修改，只能在扩展名中修改。请注意，您需要获取中提到的字体的实际woff文件的URL