.manifest文件和@font face，iOS设备，如何使其工作?或者优雅的后退

Question

我正在开发一个web应用程序。主要用于iPad mini。将网页保存到主屏幕，以便用户轻松访问。

通过@font face CSS规则，我想使用许多字体。

如果用户没有连接到互联网，我仍然希望应用程序能够正确显示，所以我包含了一个.manifest文件，要求设备下载所有必要的资源。其中一些资源包括.ttf和.otf字体。

到目前为止，.manifest文件在允许我在用户设备上存储任何必要的文档和图像资源方面发挥了著名的作用。在浏览文件目录时，我现在已经到达了字体文件夹。当我在.manifest文件中包含.ttf或.otf文件并尝试在断开互联网连接的情况下打开应用程序时，iPad告诉我它无法连接到互联网，因此无法打开应用程序。我点击重试，它加载了文档，但它是一个很大的元素级联，完全没有样式，通常根本不起作用。简而言之，这是不可接受的。

在我看来，包含.ttf或.otf文件类型会由于某种原因破坏.manifest文件。有人知道怎么做吗？

如果我只是不在清单文档中包括.ttf或.otf文件，即使我连接到互联网，由于某种原因，它也不会显示字体。所以在我看来，.manifest文档确实控制了用户看到什么和没有看到什么。有没有一种方法可以只使用标准字体作为后备（目前已经实现并工作），但如果用户连接到互联网，则允许显示@font face规则所包含的字体？

如有任何帮助/见解，我们将不胜感激！

@谢谢你的回复。以下是我的.manifest文件的读取方式：

CACHE MANIFEST
CACHE:
index.html
style.css
beforethegame.js
gameplay.js
glow.js
jquery.form.js
jquery.min.js
quiz.js
mobiletouch.js
images/arrow-left.png
images/arrow-right.png
images/chalk-apple.png
images/chalk-clock.png
images/chalk-pin.png
images/chalk-sound.png
images/full-screen-map-1.jpg
images/game-header.png
images/infinity-wave.gif
images/ipad-prize.png
images/kenshoo-logo.png
images/kenshoo-wave-animation.gif
images/legend-letter-a.png
images/legend-letter-b.png
images/legend-letter-c.png
images/legend-letter-d.png
images/legend-letter-e.png
images/legend-letter-f.png
images/legend-letter-g.png
images/legend-letter-h.png
images/legend-letter-i.png
images/legend-letter-j.png
images/Maximize-01.png
images/Minimize-01.png
images/pin.png
images/pin-1.png
images/property-map-bare-1.jpg
images/pull-tab.png
images/quiz-submit-button-1.png
images/second-prize.png
images/logos/admarketplace-logo.png
images/logos/boostctr-logo.png
images/logos/brighttag-logo.png
images/logos/centuryinteractive-logo.png
images/logos/conductor-logo.png
images/logos/covario-logo.png
images/logos/datapop-logo.png
images/logos/gearylsf-logo.png
images/logos/pmdigital-logo.png
images/logos/ramimeiri-logo.png
images/logos/resolutionmedia-logo.png
images/logos/shoutlet-logo.png
images/logos/yahoo-logo.png
images/logos/zenya-logo.png
images/logos/homescreen-icon.png
images/logos/K8-1.png
images/logos/k8-animation.gif
images/logos/k8-logo.png
Fonts/ProximaNova-Reg.ttf
Fonts/ProximaNova-Bold.ttf
Fonts/2810B1_0_0.ttf
Fonts/Chalkduster.ttf
Fonts/digital-7.ttf
Fonts/KRM63.ttf
NETWORK: n*n

Answer 1

尝试这个@font face实现

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1 {
  font-family: 'OpenSans';
  font-weight: 300%;
}

有关详细信息，请查看此示例https://github.com/ttibensky/BulletProof-font-face-implementation