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

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

当我尝试使用Web字体设置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:

         

Hello world

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

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

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

我尝试创建一个小提琴,但网络字体不是从Android Chrome上的Google网络服务中提取的:

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

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

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

我个人在使用Android的Chrome中正确渲染Webfonts时遇到了问题 – Nexus S和Nexus 7。

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

在附加的示例代码中,似乎一切都在最大宽度88.8%。 您可以拥有更宽的第一个DIV,但随后它会打破下面的DIV。 一切似乎只是在那个神奇的百分比。 对某些人来说,这可能是一个很好的解决方法。 您的里程可能会有所不同,您可能需要使用百分比 – 我需要在响应式布局(gridpak)中略微调整百分比,但我怀疑它在整体百分比方面可能仍然符合相同的逻辑。 在这个bug的所有行为都很奇怪但是这似乎有点稳定到一些可用的模式,也许这可以帮助你。

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

你可以在这里看到测试: http : //richhollis.github.com/grumpy-wizard-font-test/

     Grumpy Wizards      

Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

18px Grumpy wizards make toxic brew for the evil Queen and Jack

17px Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

18px Grumpy wizards make toxic brew for the evil Queen and Jack

17px Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

Grumpy wizards make toxic brew for the evil Queen and Jack

18px Grumpy wizards make toxic brew for the evil Queen and Jack

17px Grumpy wizards make toxic brew for the evil Queen and Jack

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

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

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

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

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

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

我注意到,如果你切换平板电脑的方向,然后切换回来,webfonts都显示正常。 更奇怪的是,同样的webfont在网站的某些部分显示正常,而在其他部分则不然。

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

这非常令人沮丧……