@ font-face가 모바일 웹킷에서 작동하지 않습니다.

Question

을 테스트 한 모바일 웹킷 브라우저 (iPhone 3GS의 Safari, 기본 Android 2.2 브라우저 및 Android의 돌핀 브라우저)에서 동작하는 데 문제가 있습니다.

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 글꼴 소스에 SVG ID를 확인했지만, 그들은 모두 일치까지.

나중에 CSS에서 문자 간격 규칙이 있기 때문에 그럴 수 있습니까?

감사합니다.

Answer 1

사실, 구문이 잘못되었습니다. 나는 트위터를 통해이 솔루션에 걸쳐 발견 : 그것은 완벽하게 작동

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도 추가해야합니다. 나는 안드로이드 4.1과 4.2에서 테스트 중이며 근심은 괜찮은 것 같았다! 하지만 4.0.3에서는 tff 글꼴을 추가해야했습니다.

Google에서 ttf 글꼴을 다운로드하는 방법을 보려면 http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/을 참조하십시오.