5

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

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

3 回答 3

3

I believe this should work for a Chrome packaged app. You will need to whitelist the URL in your manifest (https://developer.chrome.com/apps/app_external) and then use a bit of JavaScript that looks like this:

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();
于 2014-07-08T20:23:45.033 回答
3

使用沙盒不是一个好方法

它可能会使您的应用程序受到攻击和安全问题。
这就是 Chrome 应用环境中的 wy，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的地方。

于 2014-02-15T23:18:36.857 回答
0

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

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

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

于 2013-11-15T01:39:25.467 回答