0

私はウェブアプリを開発しています。主に iPad mini で使用します。ユーザーが簡単にアクセスできるように、Web ページをホーム画面に保存します。

@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/ttivensky/BulletProof-font-face-implementation

于 2014-01-27T11:17:04.627 に答える