3

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

4

1 回答 1

0

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

每个扩展程序都保存在本地，无论使其运行的代码是否需要互联网访问和服务器端脚本。Chrome 扩展程序只是一个保存为crx存档的目录，它实际上是一个重命名的zip文件。该目录以及必要的开发人员信息和元数据与任何其他站点的目录一样，带有html、 、css、javascript、字体、图像等。显然，如果您的扩展程序确实使用服务器端脚本，则需要托管这些脚本。如果您正在构建扩展，我相信您知道其中的大部分内容，但我正在详细说明，以便初学者可以跟随。

一般来说，字体是很小的文件（很少超过 200k，除非它们是 grunge 类型，或者您嵌入的字符超出了必要的数量），因此如果它们是自托管的并且加载时间过长，则问题可能出在您的主机上。如果我是你，我会使用不需要自托管且免费的 Google 字体。

无论您选择哪种方式，都可以通过多种方式嵌入它们。但这是一个如何链接到.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目录中的文件。

于 2016-03-22T09:44:32.140 回答