Android 용 Chrome에서 Google 웹 글꼴이 올바르게 표시되지 않습니다.

Question

나는 font-family과 Chrome for Android를 사용하여 문제를 재현했습니다. 웹 브라우저는 글꼴을 올바르게 상속하지 않으며 대신 대체 글꼴을 사용합니다.

는

http://jsbin.com/iyifah/1/edit

이 이미 구글 (http://code.google.com/p/chromium/issues/detail?id=138257)에 발권 버그가 나타납니다.

HTML에 <meta name="viewport" content="width=device-width, initial-scale=1" />을 추가하면 문제가 해결되지만 첫 번째 요소의 글꼴 설정 문제 만 해결됩니다.

JS Bin 링크는 내가 무슨 말을하고 있는지 설명하는 데 도움이 될 것입니다. Android 용 Chrome을 사용하는 사람이 있다면 링크를 클릭하여 내가 무슨 말을하고 있는지 확인하십시오.

감사합니다.

Answer 1

문제에 대한 내 솔루션과 같이, 웹 서버에 폰트를 다운로드하고 CSS를 통해 전화를 대신 완전히 구글 웹 글꼴 도랑하는 것입니다

:

@font-face { 
    font-family: 'Droid Sans'; 
    src: url('fonts/DroidSans-webfont.eot'); 
    src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DroidSans-webfont.woff') format('woff'), 
     url('fonts/DroidSans-webfont.ttf') format('truetype'), 
     url('../fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

구글의 웹 글꼴은 오픈 소스, 그래서 우리 글꼴에 대한 다운로드를 찾는 데 문제가 없어야합니다.

이 솔루션은 Dolphin 및 Android 용 Chrome에서 모두 작동합니다.

Answer 2

오늘도이 사실을 알게되었습니다. Nexus 7 (Android 4.2.2)뿐 아니라 친구의 MacBook Pro에서 MacOS X 용 Chrome에서도 사용할 수 있습니다. 그다지 문제는 아니지만, 보통 내가 fontsquirrel.com을 통해 필요한 글꼴을 변환하기로 선택했기 때문에 테스트 및 프로토 타입을 위해 Google에서 직접 글꼴을 통합하는 것이 훨씬 편리합니다.