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

How to load google fonts into chrome packaged apps without download?

本文关键字：chrome 加载 应用程序 字体 谷歌 下载 情况下      更新时间：2023-09-26

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

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

使用沙箱不是一个好方法

它会使您的应用程序暴露于攻击和安全问题
这是wy在Chrome应用程序环境中，CSP是如此严格。

内容安全策略(CSP(

当您使用XMLHttpRequest((加载某些内容时；就像Mud说的那样，你必须关心CSP。为了了解更多信息，我建议谷歌团队的Mike West在html5rocks.com上发表这篇博客文章。

但是，如果你的目标是谷歌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应用程序的位置。

我认为这应该适用于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();

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

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

请参阅此处的类似问题：使用Typekit字体的谷歌Chrome扩展

相关文章：