Chrome for Android无法正确显示Google网页字体

Question

我用CSS的font-family属性和Android版Chrome重现了我遇到的问题。网页浏览器无法正确地继承字体，而是使用回退字体。

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

这似乎是一个已经在Google上记录的错误（http://code.google.com/p/chromium/issues/detail?id=138257）。将<meta name="viewport" content="width=device-width, initial-scale=1" />添加到HTML中应该可以解决问题，但这只能为第一个元素设置字体修复问题。 JS Bin链接将有助于解释我所说的内容。因此，如果有人使用Chrome for Android，请转到链接以了解我所说的内容！谢谢。

- AAA

Answer 1

我的解决方案是完全放弃使用Google Webfonts，而是将字体下载到Web服务器上，并通过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和Chrome for Android中都适用。

- AAA

Answer 2

我今天也注意到了这一点。不仅在我的Nexus 7上（Android 4.2.2），而且在朋友的MacBook Pro上使用的Chrome上也有相同问题。虽然我通常选择通过fontsquirrel.com转换所需的字体，但对于测试和原型集成直接从Google下载字体会更方便。

- fritzmg