段落标签上的@font-face 渲染问题，Chrome Android 4

Question

我在 Nexus 7、Android 4 平板电脑上的 Chrome 中遇到了一个奇怪的问题。

当我尝试使用网络字体设置p 标记的样式时，该字体将在某个em 或px 大小之后才会呈现：

CSS：

    @font-face {
        font-family: 'mija';
        src: url('/assets/fonts/mija-reg/mija-reg.eot');
        src: url('/assets/fonts/mija-reg/mija-reg.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/mija-reg/mija-reg.woff') format('woff'),
        url('/assets/fonts/mija-reg/mija-reg.ttf') format('truetype'),
        url('/assets/fonts/mija-reg/mija-reg.svg#mija') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    p {
        font-size: 16px;
        font-family: 'mija'
    }

还有我的 HTML：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
    </head>
    <body>
        <p>Hello world</p>
    </body>
</html>

在这种情况下，17px 及以上的任何内容都会正确呈现字体。

这只发生在p 标签上。其他所有元素都会以任何大小呈现字体而不会出现问题。

我尝试了 3 种不同的字体系列。我没有使用任何规范化文件或任何其他 CSS。

我试图创建一个小提琴，但网络字体没有从 Android Chrome 上的谷歌网络服务中提取：

http://jsfiddle.net/yxcec/4/

Answer 1

完全同意这是@Yahreen 已经回答的错误。

我注意到，虽然我在处理一个网站时遇到了这个问题，但有些页面似乎比其他页面运行得更好。所以我花了一些时间来尝试弄清楚为什么会这样，以及在此期间是否可以使用任何类型的“解决方法”。

我个人在让 Webfonts 在 Android - Nexus S 和 Nexus 7 的 Chrome 上正确呈现时遇到了问题。

我发现，如果您使用元素的宽度，似乎可以在一定程度上解决该错误，并且仍然可以让 18 像素以下的网络字体正确呈现。

在附加的示例代码中，似乎一切都在 88.8% 的最大宽度上工作。你可以有一个更宽的第一个 DIV，但它会破坏下面的 DIV。一切似乎都只在那个神奇的百分比上起作用。对于某些人来说，这可能是一个不错的解决方法。您的里程可能会有所不同，您可能需要使用百分比 - 我需要在响应式布局（gridpak）中稍微调整百分比，但我怀疑它可能仍然符合总体百分比方面的相同逻辑。毕竟这个 bug 的行为很奇怪，但这似乎可以将它稳定为一些可用的模式，也许这可以帮助你。

其他人可能会更深入地了解这里的作用，并可能提供更多建议/解释。

您可以在此处查看测试：http://richhollis.github.com/grumpy-wizard-font-test/

<!DOCTYPE>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Grumpy Wizards</title>
    <meta name="viewport" content="width=device-width">

    <link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>

    <style>
      body { font-family: 'Finger Paint', cursive; }
    </style>
  </head>

  <body style="margin:0; padding:0; background-image: url('http://www.thezorklibrary.com/history/image/grumpy_wizard1a.png')">

    <div style="width: 88.8%; background: red; opacity: 0.8">
      <h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
      <h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
      <p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
    </div>

    <div style="width: 88.8%; background: yellow; opacity: 0.8">
      <h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
      <h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
      <p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>      
      <p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
    </div>

    <div style="width: 88.8%; background: purple; opacity: 0.8">
      <h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
      <h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
      <p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>      
      <p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
    </div>    

    <div id="size"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script>$(function(){ 
      $("#size").text("window.innerWidth = " + window.innerWidth);
    });</script>

  </body>
</html>

Answer 2

我认为这是 Webkit 中的一个错误。

看起来这可能是相关的错误或与问题有关：

Android Chrome 字体缩放会破坏网络字体

http://code.google.com/p/chromium/issues/detail?id=138257

Answer 3

我一直遇到这个问题。当违规元素的父容器使用百分比或 em 调整大小时，webfont 会中断。当它用像素调整大小时，字体可以正常工作。

为了弄清楚这是否是问题所在，我制作了一个非常基本的页面，其中包含三个块，一个使用 % 大小，一个使用 ems 大小，一个使用 pxs。 Web 字体在 Nexus 7 上的每个块中都渲染得很好，这让我相信这不是问题所在。

我注意到，如果您切换平板电脑的方向，然后再切换回来，网络字体看起来都很好。更奇怪的是，相同的 webfont 在网站的某些部分显示正常，而在其他部分显示不正常。

我在 Nexus 7 上使用网络字体的总体体验非常不一致和令人困惑。我不认为这是 webkit 错误或 android 错误，因为我的 android 手机上的 chrome 从未给我同样的头痛。

这很令人沮丧...