保存字体文件以供离线查看

Question

我有一个非常受客户驱动的网站，我希望能够保存该网站以供离线查看。

在我的网站中，我包含了 font-awesome 版本 4.3.0。使用 Chrome 保存页面以供离线查看时，所有资源似乎都按预期下载。但是，当离线查看网站时，不会显示字体图标。

查看调试控制台，似乎在保存网站以供离线查看时没有包含实际字体文件本身。字体文件在 font-awesome CSS 文件中，使用 URL('...').

链接

所以我的问题是：

有没有办法将字体文件包含在网页中，以便在保存以供离线查看时同时下载字体文件？

Answer 1

您可以在命令行工具 wget 上执行此操作。下载 wget here

并在命令行中输入：

wget -p -k http://www.example.com

它将下载所有 CSS、JS 和 Webfonts。

这将使 wget 成为 Mozilla 网络浏览器

正在下载整个站点： Wget 还可以下载整个网站。但是因为这会给服务器带来沉重的负担，wget 将服从 robots.txt 文件。

wget -r -p http://www.example.com

-p 参数告诉 wget 包含所有文件，包括图像。这意味着所有 HTML 文件都将按照它们应有的方式显示。

如果你不想让 wget 服从 robots.txt 文件怎么办？您可以像这样简单地将 -e robots=off 添加到命令中：

wget -r -p -e robots=off http://www.example.com

由于许多网站不会让您下载整个网站，他们会检查您的浏览器身份。要解决此问题，请使用 -U mozilla.

wget -r -p -e robots=off -U mozilla http://www.example.com

Answer 2

在您的主目录中创建一个名为 "fonts" 的文件夹，并将所有字体存储在该文件夹中。

例如，如果 ColaborateThinRegular 是您 "fonts" 文件夹中的一种字体，您可以在 CSS 文件中使用以下代码调用它。

例子

@font-face {
font-family: 'ColaborateRegular';
src: url('../fonts/colabthi-webfont.eot');
font-weight: normal;
font-style: normal;
}

保存以供离线查看时，也会下载字体文件

Saving font file for offline viewing