@ font-face không hoạt động trong Webkit di động

Question

Tôi đang gặp sự cố khi tải @font-face để hoạt động trong bất kỳ trình duyệt Webkit di động nào mà tôi đã thử nghiệm - Safari trên iPhone 3GS, trình duyệt Android 2.2 mặc định và trình duyệt Dolphin trên Android.

Nó hoạt động trong tất cả các trình duyệt trên máy tính để bàn, từ IE7 đến IE9, FF3.5, Safari 4 và Opera.

Các phông chữ và CSS là từ 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; 
} 

Tôi đã kiểm tra các SVG ID trong nguồn phông chữ SVG, và tất cả đều phù hợp lên.

Có thể vì tôi đã có một số quy tắc khoảng cách chữ cái sau này trong CSS?

Cảm ơn!

Answer 1

Khi nó quay ra, cú pháp đã sai. Tôi tình cờ giải pháp này qua twitter:

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

Nó làm việc một cách hoàn hảo. Chỉ cần kiểm tra trong tất cả các trình duyệt chính và phông chữ của tôi hiển thị, bao gồm cả trên Android và iOS.

Bây giờ, CSS tôi đọc như sau:

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

Vui mừng khi biết có một giải pháp chống đạn tốt hơn trên mạng so với dang smileyface hack.

Hy vọng điều này sẽ giúp ai đó!

Answer 2

Theo http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 và 4.3 không hỗ trợ phông chữ woff. Vì vậy, bạn phải thêm ttf. Tôi đang thử nghiệm trên Android 4.1 và 4.2 và woff dường như là ok! Nhưng trên 4.0.3, tôi phải thêm phông chữ tff.

Xem liên kết này http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/ để xem cách tải xuống phông chữ ttf từ Google.