Question

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

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

最后，我对浏览器支持做了一些研究，比较appcache，ttf, woff, eot, and svg fonts。我得出的结论是，所有支持appcache的浏览器都可以使用woff或ttf，并且svg和eot几乎没有支持。（限制因素是android没有woff支持，IE没有ttf支持）。使用此功能，字体仍可正确显示。但是，它仍然非常低效，因为无论需要下载两种字体。

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

Answer 1

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

Answer 2

正如我have since discovered in another question, IE 9+ DOES support TTF fonts, as long as they are formatted correctly。这意味着支持HTML5应用程序缓存的所有主流浏览器也可以使用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是一种更好的方法。

here's a webpagetest result of IE10 using and caching the TTF font。我已经确认@ font-face在浏览器中看起来仍然“防弹”。

此设置存在两个小问题：

已经在本地使用该字体的客户端仍会下载它（这对我来说不是主要问题，因为只有约5％的访问者拥有它）
边缘情况：读取清单但由于某种原因无法使用ttf的浏览器仍可在线工作，但不能脱机。我找不到展示这种行为的浏览器，但一切皆有可能。同样，只有极少数客户会体验到它。

使用html5 appcache进行最有效的webfont配置

2 个答案: