android - Android 版 Chrome 根据分辨率以不同方式呈现字体

Question

EDIT 1: Apparently, I don't have enough reputation to post images yet, so I had to externally link them.

EDIT 2: Apparently, I don't have enough reputation to post more than two hyperlinks, sorry for the inconvenience of having to copy and paste a URL.

为 friend 建立了一个网站 (http://vitkodance.com)，并使用了 Google Web 字体的 @font-face 实现。然后我通过一系列后备调用字体。标题采用脚本风格，正文采用衬线风格。当我在手机上的 Android 版 Chrome 上加载网站时，字体呈现方式有所不同，具体取决于手机的方向(以及可用的分辨率)。

这是纵向的网站(后备字体):Chrome for Android Portrait Rendering .

这是横向站点(预期):Chrome for Android Landscape Rendering .

在我的 Nexus 7 平板电脑上，字体在两个方向上都按预期显示。有没有办法来解决这个问题？这是基于我选择的字体的预期行为，还是必须处理字体大小(以 em 为单位)和行高值的问题？

Answer 1

我遇到了同样的问题并提出了类似的问题。

目前，这是一个正在此处跟踪的错误 http://code.google.com/p/chromium/issues/detail?id=138257

Android 版 Chrome 显示后备字体，但 Dolphin 浏览器显示正确的字体，至少在我的设备上是这样。所以这似乎是一个 Chromium bug。

对于某些人来说，定义初始比例可以解决问题，如下所示:

<meta name="viewport" content="initial-scale=1">

此外，在 CSS 中添加 -webkit-text-size-adjust:100% 也可以解决该问题。

我希望我有一个明确的答案，但似乎没有。让我知道进展如何。

编辑后的答案:

我对这个问题的解决方案是完全放弃 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;
}

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

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