使用Google Chrome扩展程序打包字体 [英] Packaging a font with a Google Chrome extension

问题描述

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

解决方案

选择您的字体。例如，我将采用Stint Ultra Expanded 。如何将它添加到您的网页中：

/ 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）格式（'woff'）; 
 
  

取第一个参数 url http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff

使用本地参数 code> src 属性值作为文件名（ Stint Ultra Expanded ）

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

  wget -OStint Ultra Expanded.woffhttp：// themes .googleusercontent.com / static / fonts / stintultraexpanded / v1 / FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff 
  

现在创建css文件并添加您以前见过的内容。
但是您必须更改 src 属性的值。删除所有本地 s并调整 url 。它应该是这样的：

  @ font-face {
 font-family：'Stint Ultra Expanded'; 
 font-style：normal; 
 font-weight：400; 
 src：url（'../ fonts / Stint Ultra Expanded.woff'）格式（'woff'）; 
} 
  

现在将您的css文件添加到扩展名中，并使用字体：

$ b

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 ：
$ b

  @ font-face {
 font-family：'Stint Ultra Expanded'; 
 font-style：normal; 
 font-weight：400; 
 src：url（'chrome-extension：// __ MSG _ @@ extension_id __ / fonts / Stint Ultra Expanded.woff'）format（'woff'）; 
 
 $ / code> 

您可以添加 @ font-face 规则在你的CSS中，只要你喜欢。

注意：本地值在 src 属性告诉你应该使用哪个名称来存储它。第二个提示：如果你使用它的时候像google预期的那样，你的浏览器会检查这个字体是否已经可以在本地使用。如果情况并非如此，那么它将被下载并存储。所以下次它会使用之前存储的字体。

从Chrome 37（也许更早）开始，您需要在扩展程序的清单：

 web_accessible_resources：[
font / *。woff2
] 
  

否则您会看到如下错误：

 拒绝Chrome扩展的加载：// {ID} / font / My Web Font.woff2。 
必须在web_accessible_resources清单键中列出资源，才能通过扩展名外的页面加载资源。 
  

I want to use something other than the standard fonts with my Chrome extension. I was excited about the possibility of using the Google Web Fonts, but it seems that could incur a penalty for transferring the web font over the network whenever your extension uses it, to the point of affecting the performance of my extension. Do I have any option for packaging a font with my extension that will work on all Chrome-supported platforms (Windows/Mac/etc.)? Thanks in advance

解决方案

Choose your font. As example I'll take "Stint Ultra Expanded". There is example how to add it to your page:

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

Take only the href and open it in browser. You'll see smth like this:

@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');
}

Take first parameter of url value from src property (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff).

Download this file.

Use parameter of local value of src property as filename (Stint Ultra Expanded)

Easy way is to download it is using wget:

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

Now create css file and add content that you have seen before. But you have to change value of src property. Remove all locals and adjust url. It should be smth like this:

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

Now add your css file to extension and use the font:

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>

---

If you would like to use this font in content_script you have to adjust url in your css:

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

You can add as many @font-face rules in your css as you like.

Notice: local value in src property tells you which name should be used to store it. It is good idea to use this name.

Second notice: If you are using it like google expected, your browser would check if this font is already available local. If this is not the case, then it would be downloaded and stored. So next time it would use font that was previously stored.

As of Chrome 37 (maybe earlier), you need to mention the font as a web accessible resource in the extension's manifest:

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

Otherwise you would see an error like:

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.

这篇关于使用Google Chrome扩展程序打包字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！