Question

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

当我尝试使用网络字体设置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上的Google网络服务中提取：

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

Answer 1

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

我注意到，当我在网站上遇到这个问题时，我正在研究一些网页似乎比其他网页更好用。因此，我花了一些时间尝试找出原因，以及在此期间是否可以使用任何类型的“解决方法”。

我个人在使用Android的Chrome中正确呈现Webfonts时遇到了问题 - Nexus S和Nexus 7.

我发现如果你玩你的元素的宽度，似乎可以在一定程度上解决这个错误，仍然可以获得18px以下的网络字体来正确渲染。

在附带的示例代码中，似乎一切都在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

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

为了弄清楚这是否是唯一的问题，我制作了一个非常基本的页面，其中包含三个块，一个使用％，一个使用ems，一个使用px。网络字体在Nexus 7的每个块中都很好，这让我相信这一点不是问题。

我注意到，如果您切换平板电脑的方向，然后切换回来，则网页字体显示正常。更奇怪的是，同样的webfont在网站的某些部分显示得很好，而在其他部分则没有。

我在Nexus 7上使用webfonts的整体体验非常不一致且令人困惑。我不认为这是一个webkit错误或一个android bug，因为我的Android手机上的chrome从来没有给我带来同样的头痛。

这非常令人沮丧...

对于段落标记，Chrome Android 4的@ font-face渲染问题

3 个答案: