Question

我目前正在为Chrome和Safari开发浏览器扩展程序。更具体地说，当用户将鼠标悬停在某些关键字上时，会显示工具提示。目前，我正在使用@ font-face链接到我网站上托管的某些字体。问题是 - 它们需要很长时间才能加载。是否可以在浏览器扩展中本地包含字体而不是外部链接？你能用其他扩展文件包装字体（甚至图像？）吗？

Answer 1

是的，你可以，这很常见。只需确保您有权分发您未创作的所有字体/图像。持有个人许可证不计算在内。

每个扩展都在本地保存，无论使其功能的代码是否需要Internet访问和服务器端脚本。 Chrome扩展程序只是一个保存为crx存档的目录，实际上是一个重命名的zip文件。该目录以及必要的开发人员信息和元数据与任何其他网站一样，包含html，css，javascript，字体，图片等。显然，如果您的扩展确实使用服务器端脚本，需要托管的脚本。如果你正在构建扩展，我相信你知道大部分内容，但我正在详细阐述，所以初学者可以跟进。

一般来说，字体是微小的文件（很少超过200k，除非它们是垃圾类型，或者你嵌入的方式多于必要的字符），所以如果它们是自托管的并且加载时间太长，问题可能就出现了你的主人如果我是你，我会使用不需要自我托管且免费的Google字体。

有several ways 嵌入它们，无论你选择哪种选择。但是这里有一个示例，说明如何链接到.crx文件中本地存储的字体，<style>标签之间的<head>标签：

<style>

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url("fonts/OpenSans-Regular-webfont.woff") format("woff");
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url("fonts/OpenSans-Italic-webfont.woff") format("woff");
}

</style>

显然，所有路径都与html目录中的crx文件相关。

在浏览器扩展中包含本地文件？

1 个答案: