All geek questions in one place

@ font-face rendering problem in paragraph tag, Chrome Android 4

I ran into an unusual issue in Chrome on a Nexus 7, Android 4 tablet.

When I try to style the p tag with a web font, the font will not be displayed until it becomes after a certain em or px size:

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' }

And my HTML:

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

In this case, all 17px and above will display the font correctly.

This only happens in the p tag. Each other element will display a font of any size without any problems.

I tried with 3 different font families. I do not use normalization files or any other CSS.

I tried to create a fiddle, but the web font is not pulled from the Google web service on Android Chrome:

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

+6
source share
3 answers

I believe this is a bug in Webkit.

It looks like this could be the corresponding error or related issue:

Android Chrome Font Extension Interrupts Web Fonts

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

0
source

I completely agree that this is a mistake that @Yahreen already answered.

I noticed that although I had this problem with the site I was working on, some pages worked better than others. So I spent some time trying to figure out why this was, and if some kind of “workaround” could be used at the same time.

I personally had problems displaying Webfonts in Chrome on Android - Nexus S and Nexus 7.

I found that if you play with the width of your elements, it seems that to some extent you can get around this error and still get 18px web fonts for proper rendering.

In the attached code sample, everything works at a maximum width of 88.8%. You may have a wider first DIV, but then it breaks the ones below. Everything seems to work in this magic percentage. This may be a workaround for some people. Your mileage may vary, and you may need to play with interest - I needed to adjust the percentage a bit in a small response (gridpak), but I suspect that it probably still matches the same logic in the overall percentage. In the end, the behavior of this error is strange, but it is like stabilizing it into some kind of useful template and maybe it will help you.

Someone else can understand a little deeper what is played here, and perhaps offer some more tips / explanations.

Here you can see the test: 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>
+2
source

I constantly came across this problem. When the parent container of the offending element has a size equal to percent or ems, webfont breaks. When it has a size with pixels, the font works fine.

To find out if it was alone, I made a very basic page with three blocks, one in size using%, one in ems size and one in px. The web font displayed in every block on the Nexus 7, which makes me believe it, is not a problem.

I notice that if you switch the orientation of the tablet and then go back, all websites look great. What is more strange, the same webfont is displayed 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 web kit error or an android error, since the chrome on my Android phone never gave me the same headache.

This is very frustrating ...

0
source

Source: https://habr.com/ru/post/925812/

More articles:


All Articles