6

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

当我尝试使用网络字体设置标签的样式时，字体在达到某个或大小p之后才会呈现：empx

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/

4

3 回答 3

2

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

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

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

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

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

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

你可以在这里看到测试：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>
于 2012-10-20T12:23:34.040 回答
0

我相信这是 Webkit 中的一个错误。

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

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

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

于 2012-09-28T22:08:02.693 回答
0

I've been running into this issue constantly. When the parent container of the offending element is sized using percentages or ems, the webfont breaks. When it's sized with pixels, the font works fine.

To figure out if this alone was the issue, I made a very basic page with three blocks, one sized using %, one sized using ems and one using pxs. The web font rendered fine in every block on the Nexus 7, which leads me to believe this alone is not the issue.

I notice that if you switch the orientation of the tablet, and then switch back, the webfonts all appear fine. What's more strange is the same webfont is displaying fine in some sections of the site and not in others.

My overall experience with webfonts on the Nexus 7 is extremely inconsistent and confusing. I don't think this is a webkit bug or an android bug as chrome on my android phone has never given me the same headache.

This is very frustrating...

于 2013-02-12T18:41:29.693 回答