使用谷歌浏览器扩展程序打包字体

我想使用Chrome扩展程序以外的标准字体。我对使用Google网络字体的可能性感到兴奋，但似乎可能会导致在您的扩展使用它时在网络上传输网络字体的惩罚，从而影响到我的扩展的性能。我可以选择使用扩展名打包字体吗？可以在所有支持Chrome的平台上运行（Windows/Mac /等）？在此先感谢使用谷歌浏览器扩展程序打包字体

来源

2013-10-06 user2852001

选择您的字体。举例来说，我将采取"Stint Ultra Expanded"。有例子，如何将它添加到您的网页：

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

只拿href并在浏览器中打开它。你会看到水木清华这样的：

@font-face { 
    font-family: 'Stint Ultra Expanded'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff'); 
}

采取url值的第一个参数从src财产（http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw。 woff）。

下载此文件。

价值srclocal财产作为文件名（滨鹬超扩展）

简单的方法是下载它的使用参数使用wget：

wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff

现在创建CSS文件，并添加内容你以前见过。但您必须更改src财产的价值。删除全部local s并调整url。它应该是水木清华这样的：

@font-face { 
    font-family: 'Stint Ultra Expanded'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/Stint Ultra Expanded.woff') format('woff'); 
}

现在添加您的CSS文件扩展名和使用的字体：

popup.html

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link href='css/fonts.css' rel='stylesheet' type='text/css'> 
</head> 
<body> 

    <span style="font-family: 'Stint Ultra Expanded';">Hello Font</span> 

</body> 
</html>

如果你想在content_script中使用此字体，您必须在您的CSS中调整url：

@font-face { 
    font-family: 'Stint Ultra Expanded'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('chrome-extension://[email protected]@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff'); 
}

你可以在你的css中添加尽可能多的@font-face规则。

注意：local值src属性告诉你应该使用哪个名称来存储它。使用这个名字是个好主意。

第二个通知：如果你使用它像谷歌预期的那样，你的浏览器会检查这个字体是否已经可用本地。如果情况并非如此，那么它将被下载并存储。所以下次它会使用先前存储的字体。

自Chrome 37（可能更早），您需要提及的字体作为网络访问资源的扩展程序清单中的：

"web_accessible_resources": [ 
    "font/*.woff2" 
]

否则，你会看到这样的错误：

Denying load of chrome-extension://{ID}/font/My Web Font.woff2. 
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

来源

2013-10-08 09:12:20

这并不适用于封装应用工作。 'web_accessible_resources'仅适用于扩展程序，托管应用程序和旧版打包应用程序，但这是一个打包应用程序。 –

我似乎无法让我的Chrome扩展程序弹出工作。 – offthat

确实'web_accessible_resources'只能用于扩展，但只需下载和集成字体（如答案的第一部分所述）就可以在打包的应用程序中正常工作。 – schellmax

要求用户访问Google Web Fonts的权限比嵌入它们要少得多（即使这对于最终的离线情况来说可能是完全合理的）。

manifest.json的

"permissions": [ 
    "http://fonts.googleapis.com/", 
    "https://fonts.googleapis.com/" 
],

来源

2014-02-22 00:05:40

这不适用于打包的应用程序，但可用于扩展。 –

@WillScott您是否找到打包应用程序的解决方案？ –

如何将CSS链接添加到扩展中？我在清单中试过，但没有在那里工作。 – Hannobo

使用谷歌浏览器扩展程序打包字体

回答

相关问题