11

JQM を使用してモバイル アプリケーションを構築しています。独自のフォントを font-face で宣言する必要があります。

index.html に最初に読み込まれたcssファイルとしてフォントcssファイルを含め、次のように宣言しています。fonts.cssfont-faces

@font-face {
    font-family:"MyFont";
    font-weight:normal;
    font-style:normal;
    src:url("fonts/MyFont.woff");
    src:url("fonts/MyFont.eot?") format("eot"),
        url("fonts/MyFont.woff") format("woff"),
        url("fonts/MyFont.ttf") format("truetype"),
        url("fonts/MyFont.svg#MyFont") format("svg");
}

私の2つのテストデバイスは、Android Google Nexus 74.2.1とAndroid 4.0.4です。Motorola Razr

Google Nexus では、モバイル Chrome と PhoneGap の両方で動作します。ただし、Motorola Razr では、モバイル Chrome でのみ機能します。標準の Android ブラウザと Phonegap はどちらも を使用しませんMyFont。

私のフォントを Android 4.0.x で動作させるための回避策はありますか?

4

1 に答える 1

10

面白い。逆の体験をしています。

私は4.2.1（CM 10.1）を実行しているGalaxy Nexusを持っています。これは、アップグレードまでフォントを完全に正常にロードしていましたが、更新以降、CSSで非常に奇妙になり始めました（まだ動作するChromeではなく、ネイティブWebKitでのみ） .

それはフォント フェイスの問題ではなく、CSS の特異性が台無しになっていることに気付きました (ブートストラップをベースとして使用し、独自の CSS に置き換えています)。ブートストラップが含まれている場合、インライン スタイルでさえ表示されません。ブートストラップを削除すると、すべて正常に動作します。非常に奇妙な。

私の問題の逆については、いくつかの考えがあります。

  • なぜ最初の src が .woff なのですか? IE 後方互換モードの .eot で見たことがありますが、.woff を使用するブラウザは 2 番目の src から使用できるはずです。最初の src を削除してみてはいかがでしょうか。(WebKit は 2 番目の src で上書きする必要があるため、これは問題ではありません)

  • フォントファイルをどのように読み込んでいますか? ローカルストレージから？ウェブサーバーから？Firefox では、フォント ファイルを含むサーバーがタイプのファイルと異なる場合、Allow Origin ヘッダーがないと読み込まれないことを知っています。

  • この同じフォント定義を Webkit 以外の他のブラウザーにロードする必要がありますか? そうでない場合は、.woff 以外のすべてのファイルを削除することを検討してください。

  • 問題はフォントフェイスですか？フォント宣言をデフォルト以外のシステム フォント (「serif」など) に設定してみてください。フォント宣言が適用されているかどうかを確認しますか、それともフォントフェイスは問題ないのに、css が何らかの形でフォントをタイプに適用していない可能性がありますか? （先週の私のケースのように）

追加情報なしで知るのは少し難しいです。あなたの @font-face 宣言は、最初の src が .woff であるという奇妙さを除けば、うまくいくはずです。私の推測では、問題は別の場所にあり、そのコード フラグメントにはありません。

編集：

私は自分の問題を追跡しました --- Android 4.2.1 では、CSS オプションのtext-rendering:動作が Chrome や以前の Android バージョンとはまったく異なっていました。このオプションを使用している場合は、変更または削除することで問題が解決するかどうかを確認してください。Android 4.0 と Android 4.2 の Webkit がフォントをレンダリングする方法が異なると私が考えた唯一のことです。

于 2012-12-23T09:11:57.607 に答える