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

Question

应该如何加载谷歌字体，我真的必须下载和打包我在应用程序中使用的每一种字体吗？我试图避免打包字体，因为它们太多以至于我的应用程序会很大（它是一个网络编辑器）

<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

> Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Nunito' because it violates the following Content Security Policy directive: "style-src 'self' data: chrome-extension-resource: 'unsafe-inline'".

我以为我可以将它作为 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();

Answer 1

使用沙盒不是个好办法

它会使您的应用程序暴露于攻击和安全问题。
Chrome 应用环境就是这样，CSP 非常严格。

内容安全政策 (CSP)

当您使用 XMLHttpRequest(); 加载内容时就像 Mud 所说的，您必须注意 CSP。要了解有关它的更多信息，我建议 Google 团队的 Mike West 在html5rocks.com 上发表这篇博文。

但是，如果您针对的是 Google Chrome 应用，那么它们与扩展程序是不同的概念，并且具有不同的规则。

在 manifest.json 中设置权限

在 Chrome 应用程序的 manifest.json 中，您不能再直接为 content_security_policy 设置环境。但是您可以在内容安全策略的白名单中为要添加的 uri 添加一些权限。这样做很容易，只需在您的 manifest.json 中添加一个白名单 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"
  }
}

如果使用 Angular.js，您将有一个标签：ng-csp，可以直接与 CSP 一起使用！您只需将标签放在正文中或将要连接 ng-app 的地方。

Answer 2

我相信这应该适用于 Chrome 打包应用。您需要将清单中的 URL 列入白名单 (https://developer.chrome.com/apps/app_external)，然后使用如下所示的一些 JavaScript：

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

Answer 3

您应该能够修改清单的内容安全策略以允许来自 google 字体网站，如下所示：

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

在此处查看类似问题：Google Chrome Extensions with Typekit Fonts