0

我正在开发一个网络应用程序。主要用于 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
4

1 回答 1

0

试试这个@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

于 2014-01-27T11:17:04.627 回答