@ Problem z renderowaniem czcionek w tagu akapitu, Chrome Android 4

W Chrome na tablecie Nexus 7 z Androidem 4 pojawia się dziwny problem.@ Problem z renderowaniem czcionek w tagu akapitu, Chrome Android 4

Kiedy próbuję nadać styl p tag czcionki internetowej, czcionka nie odda, dopóki nie jest po pewnym em lub px rozmiarze:

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

A mój HTML :

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

W tym przypadku wszystko, co ma wartość 17px i wyższa, poprawnie renderuje czcionkę.

Dzieje się tak tylko w przypadku znacznika p. Każdy inny element renderuje czcionkę w dowolnym rozmiarze bez problemu.

Próbowałem z 3 różnych rodzin czcionek. Nie używam żadnych normalizujących plików ani żadnego innego CSS.

próbowałem stworzyć skrzypce ale czcionka internetowa nie ciągnie z usługi internetowej Google Chrome na Androida:

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

Źródło

2012-09-20 Yahreen

wierzę, że jest to błąd w Webkit.

Wydaje się, jakby to może być istotny błąd lub związane z problemem:

Android Chrome czcionek przerwy powiększania czcionki internetowych

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

Źródło

2012-09-28 22:08:02 Yahreen

Całkowicie się zgadzam, że to jest błąd, jak już odpowiedział przez @Yahreen.

Zauważyłem, że podczas gdy miałem ten problem z witryną, nad którą pracowałem, niektóre strony zdawały się działać lepiej niż inne. Spędziłem więc trochę czasu, próbując ustalić, dlaczego tak się stało i czy w międzyczasie można by użyć jakiegokolwiek "obejścia".

Ja osobiście miałem problemy coraz Czcionki Webfonts do renderowania poprawnie w Chrome na Androida - Nexus S i Nexus 7.

Odkryłam, że jeśli grasz z szerokością swoich elementów wydaje się być możliwe obejście błąd w pewnym stopniu i nadal pobiera czcionki sieciowe poniżej 18 pikseli, aby renderować poprawnie.

W dołączonym kodzie przykładowym wydaje się, że wszystko działa na maksymalnej szerokości 88,8%. Możesz mieć szerszy pierwszy DIV, ale wtedy on łamie te pod spodem. Wszystko wydaje się działać w tym magicznym procencie. Dla niektórych osób może to być ok. Obejście problemu. Twój przebieg może się różnić i być może będziesz musiał grać z wartościami procentowymi - potrzebowałem nieco poprawić procent w responsywnym układzie (gridpak), ale podejrzewam, że prawdopodobnie nadal odpowiada temu samemu rodzajowi logiki w ogólnych procentach. Mimo wszystko zachowanie tego błędu jest dziwne, ale wydaje się, że stabilizuje to w jakiś użyteczny sposób i być może to pomaga.

Ktoś inny może zrozumieć nieco głębiej, co tu jest w grze i może zaoferować więcej porad/objaśnień.

Można zobaczyć test tutaj: 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>

Źródło

2012-10-20 12:23:34

ja już działa w tej kwestii ciągle. Kiedy kontener nadrzędny elementu naruszającego jest zwymiarowany za pomocą wartości procentowych lub ems, webfont pęka. Gdy ma rozmiar piksela, czcionka działa poprawnie.

Aby dowiedzieć się, czy to był jedyny problem, stworzyłem bardzo podstawową stronę z trzema blokami, jeden rozmiar przy użyciu%, jeden rozmiar przy użyciu ems i jeden przy użyciu pxs. Czcionka internetowa jest dobrze napisana w każdym bloku na Nexusie 7, co prowadzi mnie do przekonania, że to nie problem.

Zauważyłem, że jeśli zmienisz orientację tabletu, a następnie się włączysz, wszystkie powiadomienia będą wyglądały dobrze. Co dziwniejsze, ten sam webfont wyświetla się dobrze w niektórych sekcjach witryny, a nie w innych.

Moje ogólne doświadczenie z webfontami na Nexusie 7 jest bardzo niespójne i mylące. Nie sądzę, że jest to błąd w sieci lub błąd Androida, ponieważ Chrome na moim telefonie z Androidem nigdy nie dał mi tego samego bólu głowy.

To bardzo frustrujące ...

Źródło

2013-02-12 18:41:29 user1380540

@ Problem z renderowaniem czcionek w tagu akapitu, Chrome Android 4

Odpowiedz

Powiązane problemy