モバイルウェブキットで@ font-faceが動作しない

Question

iPhone 3GSのSafari、デフォルトのAndroid 2.2ブラウザ、およびAndroidのDolphinブラウザで、私が試したモバイルWebkitブラウザでは、@font-faceの動作に問題があります。

IE7、IE3、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フォントソースでSVG IDをチェックしました、そして、彼らはすべてのマッチアップ。

CSSで後で文字間隔規則があるためでしょうか？

ありがとうございます！

Answer 1

結論としては、構文が間違っていました。私は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; 
} 

優れた防弾ソリューションは、そこに一顧smileyfaceハックよりもあります知ってうれしいです。

これが誰かを助けることを願っています！

Answer 2

http://caniuse.com/woffによれば、Android 2.3,4,4.1,4.2、および4.3は、woffフォントをサポートしていません。したがって、ttfも追加する必要があります。私はAndroid 4.1と4.2でテストしていて、うまくいきました。しかし、4.0.3では、tffフォントを追加する必要がありました。

Googleからttfフォントをダウンロードするには、http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/をご覧ください。