@ Czcionka-twarz nie działa w mobilnym pakiecie Webkit

Question

Mam problem z uzyskaniem @font-face zachowania się w dowolnej testowanej przeglądarce mobilnej Webkit - Safari na iPhonie 3GS, domyślnej przeglądarce Androida 2.2 i przeglądarce Dolphin na Androidzie.

Działa we wszystkich przeglądarkach komputerowych, od IE7 do IE9, FF3.5, Safari 4 i Opera.

Czcionki i CSS są od 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; 
} 

Sprawdziłem SVG identyfikator w źródle czcionek SVG, i wszyscy zgadzają.

Czy to możliwe, ponieważ w CSS mam jakieś zasady dotyczące odstępów między literami?

Dzięki!

Answer 1

Jak się okazało, składnia była błędna. Natknąłem tego rozwiązania poprzez twitter:

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

To działało idealnie. Po prostu zaznaczyłem wszystkie główne przeglądarki i pojawiły się moje czcionki, w tym na Androida i iOS.

Teraz mój CSS brzmi tak:

@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; 
} 

Dobrze jest wiedzieć, że jest to lepsze rozwiązanie kuloodporny tam niż hack Dang smileyface.

Mam nadzieję, że to pomoże komuś!

Answer 2

Zgodnie z http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 i 4.3 nie obsługują czcionek woff. Musisz więc dodać także ttf. Testuję na Androidzie 4.1 i 4.2 i woff wydawał się być w porządku! Ale w wersji 4.0.3 musiałem dodać czcionki tff.

Zobacz ten link http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/, aby dowiedzieć się, jak pobrać czcionki ttf z Google.