@ font-face不適用於移動Webkit

Question

我無法在我測試過的任何移動Webkit瀏覽器中運行@font-face - iPhone 3GS上的Safari，默認Android 2.2瀏覽器和Android上的Dolphin瀏覽器。

它適用於所有桌面瀏覽器，從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 ID在SVG字體來源，他們都投其所好。

難道是因爲我以後在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字體。所以你必須添加tf。我正在測試Android 4.1和4.2，woff似乎沒問題！但在4.0.3上，我不得不添加tff字體。

看到這個鏈接http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/看到如何從谷歌下載ttf字體。