2

编辑 1：显然，我还没有足够的声誉来发布图片，所以我不得不从外部链接它们。

编辑 2： 显然，我没有足够的声誉来发布两个以上的超链接，对于不得不复制和粘贴 URL 带来的不便，我深表歉意。

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

这是纵向站点（后备字体）：Chrome for Android Portrait Rendering。

这是风景中的网站（预期）：Chrome for Android Landscape Rendering。

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

4

1 回答 1

4

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

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

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

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

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

添加-webkit-text-size-adjust:100%到您的 CSS 也可以解决问题。

我希望我有一个明确的答案，但似乎没有。让我知道事情的后续。

编辑答案：

我对该问题的解决方案是完全放弃 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 的 webfonts 是开源的，因此您应该可以轻松找到字体的下载。

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

于 2013-01-01T22:09:22.103 回答