1

我有一个单页面静态站点，我在其中配置了 appcache 以缓存加载页面所需的所有资源以供将来使用，以最大限度地减少服务器请求并使页面脱机可用。

我遇到了字体支持问题。我使用带有@font-face 和 woff、ttf、svg 和 eot 格式的网络字体，以确保与所有浏览器兼容。问题是我必须在缓存清单中包含多种字体以确保跨浏览器的兼容性。虽然通常浏览器只会读取 @font-face ，选择适当的字体格式，然后只下载该格式（或者如果它在本地可用，则根本不下载），但我无法找到一种方法来使用 appcache 来完成它，同时确保一切可缓存和离线使用。我的解决方案只是在缓存清单中包含所有字体格式。虽然这很有效，但非常浪费，因为客户下载了他们不需要的字体。

最后，我对浏览器支持做了一些研究，比较了 appcache、ttf、woff、eot 和 svg 字体。我得出的结论是，所有支持 appcache 的浏览器都可以使用 woff 或 ttf，而 svg 和 eot 的支持很少。（限制因素是 android 没有 woff 支持，IE 没有 ttf 支持）。使用它，字体仍然可以在任何地方正确显示。但是，它仍然非常低效，因为无论需要都下载了两种字体。

那么，总而言之，最有效地处理字体和 appcache 的推荐方法是什么？

4

2 回答 2

1

我认为您不需要在 appcache 清单中明确列出字体。只要在页面上使用字体，它就应该自动包含在浏览器的应用程序缓存中。

于 2013-07-15T22:49:04.717 回答
1

正如我在另一个问题中发现的那样，只要格式正确，IE 9+ 就支持 TTF 字体。这意味着所有支持 HTML5 Application Cache 的主流浏览器也可以使用 ttf 字体，所以我只需要在缓存中包含一种格式。我已经调整了防弹@font-face 语法，使其更喜欢TTF 而不是WOFF（因为这就是缓存中的内容），并在我的缓存清单中添加了通配符以处理任何边缘情况。

这是我修改后的@font-face 格式：

@font-face {font-family: '<font-family>';src: url('<font-file>.eot?#iefix') format('embedded-opentype');src: local('<font-family>'),url('<font-file>.ttf')  format('truetype'),url('<font-file>.woff') format('woff'),url('<font-file>') format('svg');}

这是缓存清单格式：

CACHE MANIFEST
<other stuff>
...
/<font-file>.ttf

NETWORK:
*.ttf
*.woff
*.svg
*.eot

注意：正如下面评论中提到的，在缓存清单的 NETWORK 部分中使用通配符可能不是有效的标记。使用绝对 URL 是一种更好的方法。

这是IE10使用和缓存TTF字体的网页测试结果。我已经验证了@font-face 在浏览器中仍然看起来“防弹”。

此设置有两个小问题：

  • 已经在本地提供字体的客户仍然会下载它（这对我来说不是主要问题，因为只有大约 5% 的访问者拥有它）
  • 边缘情况：将读取清单但由于任何原因无法使用 ttf 的浏览器仍然可以在线工作，但不能离线工作。我找不到表现出这种行为的浏览器，但一切皆有可能。同样，只有极少数的客户会体验到它。
于 2013-07-17T23:16:53.073 回答