Google chrome extension 使用Google Chrome扩展打包字体_Google Chrome Extension_Webfonts

Google chrome extension 使用Google Chrome扩展打包字体

google-chrome-extension

Google chrome extension 使用Google Chrome扩展打包字体,google-chrome-extension,webfonts,Google Chrome Extension,Webfonts,我想在Chrome扩展中使用标准字体以外的其他字体。我对使用GoogleWeb字体的可能性感到兴奋，但如果您的扩展使用它时通过网络传输Web字体，可能会受到惩罚，甚至会影响我的扩展的性能。我是否可以选择将字体与扩展名打包在所有支持Chrome的平台（Windows/Mac/等）上？提前感谢选择您的字体。我举个例子。下面是如何将其添加到页面的示例： <link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded'

我想在Chrome扩展中使用标准字体以外的其他字体。我对使用GoogleWeb字体的可能性感到兴奋，但如果您的扩展使用它时通过网络传输Web字体，可能会受到惩罚，甚至会影响我的扩展的性能。我是否可以选择将字体与扩展名打包在所有支持Chrome的平台（Windows/Mac/等）上？提前感谢

选择您的字体。我举个例子。下面是如何将其添加到页面的示例：

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

从

src

属性中获取

url

值的第一个参数(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff)

现在下载这个文件

使用

src

属性的

local

值的参数作为文件名（Stint Ultra Expanded）

简单的方法是使用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

。应该是这样的smth：

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

@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>

您可以在css中添加任意数量的

@font-face

规则

注意：

src

属性中的

local

值告诉您应该使用哪个名称来存储它。使用这个名字是个好主意

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

从Chrome37（可能更早）开始，您需要在扩展的清单中将字体作为web可访问的资源：

"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.

向用户请求访问Google Web字体的权限比嵌入字体要省力得多（即使这对于最终的离线场景来说可能非常有意义）

manifest.json

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

这已经很旧了，但是对于仍然有问题的人来说，可以使用javascript加载字体文件。我很难在shadowdom中使用字体声明；所有样式都会加载，但是chrome会完全忽略字体声明

let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);

这对我来说效果很好。使用字体可能是首选，但我很确定我的用例是chrome中的一个bug

这在打包应用程序中不起作用，但在扩展中起作用。@WillScott您找到打包应用程序的解决方案了吗？您将如何将CSS链接添加到扩展中？我在清单中尝试了它，但没有成功。您可以在一个css文件中使用

@import

css属性。这不适用于软件包和应用程序“web\u可访问的\u资源”仅允许用于扩展、托管应用和旧版打包应用，但这是一个打包应用。我似乎无法在Chrome扩展的弹出窗口中使用此方法。确实，“web\u可访问的\u资源”仅允许用于扩展，而只是下载和集成字体（如回答的第一部分所述）在打包应用程序中运行良好。

\uuuu MSG\u@@extension\u id\uuuu

的哪些部分需要替换为我的id？对于其他好奇的人来说，答案是在我写这个回答时的“整个部分”（2013年-大约6年前）没有必要替换任何内容。这正是您必须使用的URL。今天我不知道是否有任何更改。但在我看来它仍然是正确的。这是对我有效的解决方案，我的用例似乎与您的相似。

let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);