Question

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

编辑2：显然，我没有足够的声誉来发布超过两个超链接，很抱歉不得不复制和粘贴网址。

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

以下是纵向网站（后备字体）：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

跟踪的错误

Chrome for Android显示后备字体，但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的网络字体是开源的，因此您可以毫无困难地找到字体的下载。

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

Chrome for Android根据分辨率不同地渲染字体

1 个答案: