Chrome for Android无法正确显示Google Webfonts [英] Chrome for Android does not display Google webfonts correctly

问题描述

我已经重新创建了使用CSS font-family 和Chrome for Android的问题。 Web浏览器无法正确继承字体，而是使用后备字体。

I have recreated the problem I'm having using CSS font-family and Chrome for Android. The web browser does not inherit fonts correctly, and, instead, uses the fallback font.

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

这似乎是已经在Google上发布的错误（ http://code.google.com/p/chromium/issues/ detail？id = 138257 ）。

This appears to be a bug already ticketed on Google ( http://code.google.com/p/chromium/issues/detail?id=138257 ).

添加<元名称= viewport content = width = device-width，initial-scale = 1 /> 应该可以解决此问题，但这只能解决第一个元素的设置字体的问题。

Adding <meta name="viewport" content="width=device-width, initial-scale=1" /> to the HTML is supposed to fix the problem, but this only fixes the problem for the set font for the first element.

JS Bin链接将帮助解释我在说什么。因此，如果有人拥有适用于Android的Chrome浏览器，请转到该链接以查看我在说什么！

The JS Bin link will help explain what I am talking about. So, if anyone has Chrome for Android, go to the link to see what I am talking about!

谢谢。

推荐答案

我对这个问题的解决办法是放弃完全使用Google Webfonts，然后将字体下载到Web服务器并通过CSS调用它们，例如：

My solution to the problem is to ditch Google Webfonts completely and, instead, download the fonts to the web server and call them through CSS, like so:

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

Google的网络字体是开源的，因此我们可以毫无问题地找到以下下载内容字体。

Google's webfonts are open source, so we should have no problem finding the downloads for the fonts.

此解决方案在Android的Dolphin和Chrome中都可以使用。

This solution works in both Dolphin and Chrome for Android.

这篇关于Chrome for Android无法正确显示Google Webfonts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！