web-dev-qa-db-ja.com

@ font-faceがモバイルWebkitで機能しない

テストしたモバイルWebkitブラウザ（iPhone 3GSのSafari、デフォルトのAndroid 2.2ブラウザ、Androidのドルフィンブラウザ））で@font-faceを動作させるのに問題があります。 。

IE7からIE9、FF3.5、Safari 4、Operaまでのすべてのデスクトップブラウザで動作します。

フォントとCSSはFontSquirrelからのものです：

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: local('☺'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot');
    src: local('☺'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

SVGフォントソースのSVGIDを確認しましたが、すべて一致しています。

後でCSSに文字間隔のルールがあるからでしょうか？

ありがとう！

iphoneandroidcssfont-facemobile-webkit
14
bigsweater

結局のところ、構文が間違っていました。私はTwitterでこのソリューションに出くわしました：

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

それは完璧に機能しました。すべての主要なブラウザをチェックインすると、AndroidとiOSを含め、私のフォントが表示されます。

今、私のCSSは次のようになります：

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot#') format('eot'),
        url('../fonts/League_Gothic-webfont.woff') format('woff'),
        url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10Bold';
    src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatinModernRoman10BoldItalic';
    src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'),
        url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
        url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
        url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
    font-weight: normal;
    font-style: normal;
}

ダングスマイリーフェイスハックよりも優れた防弾ソリューションがあることを知ってうれしいです。

これが誰かに役立つことを願っています！

17
bigsweater

http://caniuse.com/woff によると、Android 2.3、4、4.1、4.2、4.3はwoffフォントをサポートしていません。したがって、ttfを次のように追加する必要があります。 Android 4.1と4.2でテストしていて、woffは問題ないようです！しかし、4.0.3では、tffフォントを追加する必要がありました。

Googleからttfフォントをダウンロードする方法については、このリンク http://sanchez.org.ph/use-Host-and-download-google-fonts-on-your-own-website/ を参照してください。

0
Jeremy