web-dev-qa-db-ja.com

@ font-face宣言がAndroid 4.3インターネットブラウザで機能しませんか？

私のSamsung Galaxy S3スマートフォンは、最近Android 4.1.3からAndroid 4.3。にアップグレードされました。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;
    /* ... */
}

私がサイトで使用する各フォントは、同様の方法で宣言されています。 「enjoy your ride」メッセージのGreat Vibes宣言（custom.cssにも含まれています）は、比較する別の宣言です。すべてのフォントはChrome for Android and Firefox for Android for in the device、not not in Androidインターネット。

私はこのCSSをできるだけ早く完成させる必要があり、ボランティアとしてこのプロジェクトに取り組んでいます（有料）。だから私はコードレビューではなく迅速な修正を探しています。私はUXデザイナーでもあり、ウェブ開発者ではありません。前もって感謝します。

編集：私はEdge Inspect CCとweinreで今日さらにいくつかのデバッグを行い、私のAndroid電話と私のiPadの両方を接続しましたWeinreでは、iPadではフォントファミリを変更できますが、電話では変更できません。両方のデバイスでフォントの色を変更できます。そのため、根本的な問題は、リモートデバッガを使用するときに、フォントをデフォルトから変更します。

csscross-browserfont-faceandroid-4.3-jelly-beanandroid-internet
16
David

私はそれをどのように解決するかについて同じ問題があります。

メディアクエリを使用するモバイルでのみ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;
    }
}

お役に立てば幸いです。

19
Beauceron

同様の問題が発生しており、text-rendering: optimizeLegibilityを使用したことが原因でした。CSSからこれを削除すると、フォントが4.3で再び動作するようになりました。

20
BenV

私は jsfiddle をsvgおよびwoffフォントのみで作成し、Android 4.3デバイスをデフォルトで使用して）テストしますブラウザ。すべて動作します。

モバイル用の不要なフォントをすべて削除するだけです。すべてのモバイル supportssvgフォント、FFおよびIE10 needswoff。したがって、モバイルクエリとデスクトップフォントを区別するために、メディアクエリを使用できます。

すべての種類のフォントが必要な場合は、Content-Typeヘッダーのフォントファイルを確認してください。常にtext/plainですが、これは誤りです。

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

this ページも確認して、font faceに関する既知の一般的な問題を確認してください。

2
Pinal

また、モバイルをターゲットとするメディアクエリの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;
    }
}
1
Mathew Porter

以前に同様の問題があり、フォントを使用していた要素/テキストにfont-weight: normal !important;を追加することで解決しました。問題は、フォントの太さが要素に継承されていて、これが原因でフォントが失敗したことでした。それがうまくいくことを願っています:)

だからあなたのコードで：

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}
1
tnt-rox