6

Nexus 7、Android 4 タブレットの Chrome で奇妙な問題が発生しています。

pWeb フォントを使用してタグのスタイルを設定しようとすると、特定のサイズ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 は使用していません。

フィドルを作成しようとしましたが、Web フォントが Android Chrome の Google の Web サービスから取得されていません。

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

4

3 に答える 3

2

@Yahreen によって既に回答されているように、これはバグであることに完全に同意します。

作業中のサイトでこの問題が発生しているときに、一部のページが他のページよりもうまく機能しているように見えることに気付きました。そのため、これがなぜなのか、そしてその間に何らかの「回避策」を使用できるかどうかを調べるために、時間を費やしました.

個人的には、Android の Chrome (Nexus S と Nexus 7) で Webfonts を正しくレンダリングするのに問題がありました。

要素の幅をいじってみると、バグをある程度回避し、18px 未満の Web フォントを正しくレンダリングすることができるように見えることがわかりました。

添付のサンプル コードでは、最大幅 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 のフォント ズームで Web フォントが壊れる

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

于 2012-09-28T22:08:02.693 に答える
0

私は常にこの問題に直面しています。問題のある要素の親コンテナーがパーセンテージまたは ems を使用してサイズ変更されると、Web フォントが壊れます。サイズがピクセルの場合、フォントは正常に機能します。

これだけが問題かどうかを判断するために、% を使用したサイズ、ems を使用したサイズ、pxs を使用したサイズの 3 つのブロックを含む非常に基本的なページを作成しました。Nexus 7 のすべてのブロックで Web フォントが適切にレンダリングされたので、これだけでは問題ではないと思います。

タブレットの向きを切り替えてから元に戻すと、すべての Web フォントが正常に表示されることに気付きました。さらに奇妙なのは、サイトの一部のセクションでは同じ Web フォントが正常に表示され、他のセクションでは表示されないことです。

Nexus 7 での Web フォントに関する私の全体的な経験は、非常に一貫性がなく、混乱を招きます。AndroidフォンのChromeが同じ頭痛の種を与えたことがないので、これはWebkitのバグでもAndroidのバグでもないと思います。

これは非常にイライラします...

于 2013-02-12T18:41:29.693 に答える