@ font-face Rendering-Problem auf Absatz-Tag, Chrome Android 4

Ich bin in einem seltsamen Problem in Chrome auf einem Nexus 7, Android 4 Tablet läuft.@ font-face Rendering-Problem auf Absatz-Tag, Chrome Android 4

Wenn ich versuche, einen p-Tag mit einem Web-Schriftart, Stil, wird die Schriftart nicht machen, bis es nach einer gewissen em oder px Größe:

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

Und meine HTML :

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

In diesem Fall etwas 17px und oben wird richtig die Schriftart machen.

Dies geschieht nur auf dem Tag. Jedes andere Element wird die Schriftart in beliebiger Größe ohne Problem darstellen.

Ich habe mit 3 verschiedenen Schriftfamilien versucht. Ich benutze keine normalize Dateien oder irgendein anderes CSS.

ich versuchte, eine Geige zu schaffen, sondern der Web-Schriftart zieht nicht von Web-Service von Google auf Android Chrome:

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

Quelle

2012-09-20 Yahreen

Ich glaube, dies ein Fehler in Webkit zu sein.

Es scheint, als ob dies die relevanten Fehler oder Zusammenhang mit dem Problem sein:

Android Chrome Schrift Zoom bricht Webfonts

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

Quelle

2012-09-28 22:08:02 Yahreen

Völlig einig, dass dies ein Fehler als schon beantwortet von @Yahreen.

Ich bemerkte, dass während ich dieses Problem mit einer Website hatte, an der ich arbeitete, dass einige Seiten besser zu funktionieren schienen als andere. Also habe ich einige Zeit damit verbracht, herauszufinden, warum das so war und ob in der Zwischenzeit irgendeine Art von "Workaround" verwendet werden könnte.

Ich persönlich hatte Probleme Webfonts immer zu machen, richtig auf Chrome in Android - Nexus S und Nexus 7.

ich gefunden habe, dass, wenn Sie mit der Breite der Elemente spielen es möglich zu sein scheint, die zur Umgehung Fehler in einem gewissen Umfang und immer noch Web-Schriftarten unter 18px, um richtig zu rendern.

In dem beigefügten Beispielcode scheint alles auf einer maximalen Breite von 88,8% funktioniert. Sie können ein breiteres erstes DIV haben, aber dann bricht es die darunterliegenden. Alles scheint nur bei diesem magischen Prozentsatz zu funktionieren. Es könnte eine gute Lösung für einige Leute sein. Ihre Laufleistung kann variieren, und Sie müssen möglicherweise mit den Prozentsätzen spielen - ich musste den Prozentsatz in einem reaktionsfähigen Layout (Gridpak) leicht nach oben korrigieren, aber ich vermute, dass er wahrscheinlich immer noch der gleichen Art von Logik in Gesamtprozentsatz entspricht. Nach all dem Verhalten dieses Fehlers ist seltsam, aber dies scheint es irgendwie in ein brauchbares Muster zu stabilisieren und vielleicht hilft dir das aus.

Jemand anders könnte ein bisschen tiefer verstehen, was hier spielt und vielleicht mehr Ratschläge/Erklärungen anbieten.

können Sie den Test hier sehen: 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>

Quelle

2012-10-20 12:23:34

Ich habe immer wieder in dieser Frage läuft. Wenn der übergeordnete Container des fehlerhaften Elements mithilfe von Prozentsätzen oder ems sortiert wird, wird der Webfont unterbrochen. Wenn es mit Pixeln bemaßt ist, funktioniert die Schrift gut.

Um herauszufinden, ob dies allein das Problem war, habe ich eine sehr einfache Seite mit drei Blöcken, eine Größe mit%, eine Größe mit ems und eine mit pxs gemacht. Die Web-Schriftart wurde in jedem Block des Nexus 7 gut wiedergegeben, was mich zu der Annahme verleitet, dass dies allein nicht das Problem ist.

Ich merke, dass wenn Sie die Ausrichtung des Tabletts wechseln und dann zurück schalten, die Webfonts alle gut aussehen. Was noch seltsamer ist, ist das gleiche Webfont zeigt in einigen Bereichen der Website und nicht in anderen gut.

Meine gesamte Erfahrung mit Webfonts auf dem Nexus 7 ist extrem inkonsistent und verwirrend. Ich glaube nicht, dass dies ein Webkit-Bug oder ein Android-Bug ist, da Chrome auf meinem Android-Handy mir nie die gleichen Kopfschmerzen bereitet hat.

Dies ist sehr frustrierend ...

Quelle

2013-02-12 18:41:29 user1380540

@ font-face Rendering-Problem auf Absatz-Tag, Chrome Android 4

Antwort

Verwandte Themen