如何将谷歌字体加载到Chrome打包的应用程序而无需下载?

shu*_*uji 5 javascript blob webfonts google-chrome-app

如何加载谷歌字体,我真的必须下载并打包我的应用程序使用的每种字体吗?我试图避免打包字体,因为它们太多了我的应用程序会很大(它是一个网页编辑器)

<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'".
Run Code Online (Sandbox Code Playgroud)

我以为我可以加载它作为一个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();
Run Code Online (Sandbox Code Playgroud)

小智 0

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

"content_security_policy": "script-src 'self' http://fonts.googleapis.com; object-src 'self'"
Run Code Online (Sandbox Code Playgroud)

请参阅此处类似的问题:Google Chrome Extensions with Typekit Fonts

  • 我认为 CSP 不能在打包应用程序中以这种方式进行修改,只能在扩展中进行修改。 (4认同)