16

最近、Samsung Galaxy S3 電話が Android 4.1.3 から Android 4.3 にアップグレードされました。現在、私が設計したいくつかの Web サイトで、Android インターネット ブラウザーでテストしたものを使用して宣言したフォントが表示されません@font-face。これを修正するにはどうすればよいですか?

サイトの 1 つ (開発版): http://beta.kdfansite.com

Open Sans に関連する CSS の一部を次に示します。

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot');
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff') format('woff'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... */

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    /* ... */
}

サイトで使用する各フォントは、同様の方法で宣言されています。「乗車をお楽しみください」というメッセージの Great Vibes 宣言 (custom.css にもあります) も、比較対象の 1 つです。同じデバイスの Android 用 Chrome と Android 用 Firefox ではすべてのフォントが正しく表示されますが、Android インターネットでは正しく表示されません。

私はできるだけ早くこの CSS を完成させる必要があり、ボランティアとしてこのプロジェクトに取り組んでいます (報酬はありません)。そのため、コードのレビューではなく、簡単な修正を探しています。私は Web 開発者ではなく、UX デザイナーでもあります。前もって感謝します。

編集:今日、Edge Inspect CC と weinre で追加のデバッグを行い、Android フォンと iPad の両方をラップトップに接続しました。Weinre では、iPad ではフォント ファミリを変更できますが、電話では変更できません。両方のデバイスでフォントの色を変更できます。したがって、根本的な問題は、リモート デバッガーを使用するときにフォントをデフォルトから変更できないという事実に関連しているようです。

4

6 に答える 6

19

ここで同じ問題を解決する方法があります。

メディアクエリを使用してモバイルでのみ svg を使用します。

@media only screen and (max-width: 320px) {
@font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }

}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

それがあなたを助けることを願っています。

于 2014-01-10T17:02:45.127 に答える
19

私たちは同様の問題に直面してtext-rendering: optimizeLegibilityいました.CSS からそれを削除すると、フォントが 4.3 で再び動作するようになりました。

于 2014-04-18T21:06:13.737 に答える
2

とフォントjsfiddleのみで作成し、Android 4.3 デバイスのデフォルト ブラウザーでテストします。すべての作品。svgwoff

モバイル用の不要なフォントをすべて削除するだけです。すべてのモバイルは、 svgフォント、FF および IE10 のニーズ woffをサポートしています。そのため、モバイル用とデスクトップ用の別々のフォント フェイス定義にメディア クエリを使用できます。

すべてのタイプのフォントが必要な場合は、Content-Typeヘッダーでフォント ファイルを確認してください。常にtext/plainどちらが間違っているかを確認してください。

  • eotにはapplication/vnd.ms-fontobjectタイプがあります
  • otf と ttfにはapplication/octet-streamタイプがあります
  • woffにはapplication/font-woffタイプがあります
  • svgにはimage/svg+xmlタイプがあります

また、このページをチェックして、 に関する既知の一般的な問題を確認してくださいfont face。

于 2014-01-05T21:32:46.997 に答える
1

モバイルを対象とするメディア クエリの Beacouron のソリューションを使用することもできますが、対象とするさまざまな Android タブレットの解像度がある場合、これは難しい場合があります。

次のように、Webkit ブラウザーを対象とするメディアクエリを使用する別のアイデア:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}
于 2014-05-23T08:21:21.567 に答える
-1

2017 年現在、fonts.google.com が提供する @import クエリを使用して、好きなフォントを取得できます。目的のフォントを検索して選択し、画面下部の最小化されたバーで、「埋め込み」セクションで @import を選択する必要があります。参照用にスクリーンショットを添付しました: https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698

モバイルのデフォルトのブラウザーでも同じ問題が発生しましたが、その構文を使用した後、問題は解決しました。理由はわかりませんが、うまくいきました。

于 2017-06-23T11:11:33.190 に答える