适用于 Android 的 Chrome 无法正确显示 Google 网络字体答案

【问题标题】：Chrome for Android does not display Google webfonts correctly适用于 Android 的 Chrome 无法正确显示 Google 网络字体
【发布时间】：2012-12-08 17:19:49
【问题描述】：

我重新创建了我在使用 CSS font-family 和 Chrome for Android 时遇到的问题。 Web 浏览器没有正确继承字体，而是使用备用字体。

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

这似乎是已在 Google (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，请转到链接看看我在说什么！

谢谢。

【问题讨论】：

标签： android html google-chrome css

【解决方案1】：

我今天也注意到了这一点。不仅在我的 Nexus 7 (Android 4.2.2) 上，而且在朋友的 MacBook Pro 上的 MacOS X 的 Chrome 上。问题不大，因为我通常选择通过 fontsquirrel.com 转换我需要的字体，但是对于测试和原型设计，直接从 Google 集成字体要方便得多。

【讨论】：

【解决方案2】：

我对这个问题的解决方案是完全放弃 Google Webfonts，而是将字体下载到网络服务器并通过 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;
}

Google 的网络字体是开源的，因此我们可以轻松找到字体的下载。

此解决方案适用于 Dolphin 和 Android 版 Chrome。

【讨论】：