Question

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

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

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

到目前为止，.manifest文件在允许我存储在用户设备上的任何必要文档和图像资源方面都非常出色。在我的文件目录中工作时，我现在已经到达了我的字体文件夹。只要我在.manifest文件中包含.ttf或.otf文件并尝试在断开互联网时打开应用程序，iPad就会告诉我它无法连接到互联网，因此无法打开应用程序。我点击重试并加载文档，但它是一个很大的元素级联，完全没有风格，通常根本不起作用。总之，不可接受。

在我看来，包含.ttf或.otf文件类型会因某种原因破坏.manifest文件。有谁知道如何使这项工作？

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

非常感谢任何帮助/见解！

@idbehold感谢您的回复。以下是我的.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 implementation

@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

.manifest文件和@ font-face，iOS设备，如何让它工作？还是优雅的后备？

1 个答案: