@ पैरा टैग पर फॉन्ट-फेस प्रतिपादन मुद्दा, क्रोम एंड्रॉयड 4

मैं एक नेक्सस 7, एंड्रॉयड 4 टेबलेट पर Chrome में एक अजीब मुद्दा में चल रहा हूँ।@ पैरा टैग पर फॉन्ट-फेस प्रतिपादन मुद्दा, क्रोम एंड्रॉयड 4

जब मैं एक वेब फ़ॉन्ट के साथ एक p टैग शैली करने की कोशिश, फ़ॉन्ट से नहीं चल पाएगी यह एक निश्चित em या px आकार के बाद है जब तक:

सीएसएस:

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

और मेरे एचटीएमएल :

<!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 अलग फ़ॉन्ट परिवारों के साथ की कोशिश की है। मैं किसी भी सामान्य फाइल या किसी अन्य सीएसएस का उपयोग नहीं कर रहा हूँ।

मैं एक बेला बनाने का प्रयास किया लेकिन वेब फ़ॉन्ट एंड्रॉयड क्रोम पर गूगल की वेब सेवा से खींच नहीं है:

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

स्रोत

2012-09-20 Yahreen

मेरा मानना है कि इस वेबकिट में एक बग किया जाना है।

ऐसा लगता है कि यह प्रासंगिक बग है या समस्या से संबंधित हो सकता है:

एंड्रॉयड क्रोम फ़ॉन्ट ज़ूम टूटता वेब फोंट

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

स्रोत

2012-09-28 22:08:02 Yahreen

पूरी तरह से सहमत हैं कि इस के रूप में एक बग है @Yahreen द्वारा पहले ही जवाब दिया गया है।

मैंने देखा है कि जब मैं एक साइट के साथ इस समस्या थी मैं पर काम कर रहा था कि कुछ पृष्ठों को दूसरों से बेहतर काम करने के लिए लग रहा था। इसलिए मैंने कोशिश करने और काम करने के लिए कुछ समय बिताया कि यह क्यों था और यदि इस दौरान किसी भी प्रकार का "वर्कअराउंड" इस्तेमाल किया जा सकता था। नेक्सस एस और नेक्सस 7

मैंने पाया है कि यह वैकल्पिक हल के लिए संभव हो गया लगता है कि अगर आप अपने तत्वों की चौड़ाई के साथ खेलते हैं -

मैं व्यक्तिगत रूप से समस्याओं एंड्रॉयड में क्रोम पर सही ढंग से प्रस्तुत करने के लिए वेबफ़ॉन्ट हो रही थी कुछ हद तक बग और अभी भी सही ढंग से प्रस्तुत करने के लिए 18px के तहत वेब फोंट प्राप्त करें।

नमूना कोड संलग्न यह लगता है कि सबकुछ 88.8% की अधिकतम चौड़ाई पर काम करता है। आपके पास पहले व्यापक डीआईवी हो सकती है लेकिन फिर यह नीचे वाले लोगों को तोड़ देती है। सबकुछ केवल उस जादू प्रतिशत पर काम करता प्रतीत होता है। यह कुछ लोगों के लिए एक अच्छा कामकाज हो सकता है। आपका माइलेज भिन्न हो सकता है और आपको प्रतिशत के साथ खेलने की आवश्यकता हो सकती है - मुझे एक उत्तरदायी लेआउट (ग्रिडपैक) में थोड़ा प्रतिशत को ट्विक करने की आवश्यकता है, लेकिन मुझे संदेह है कि यह संभवतः कुल प्रतिशत शर्तों में उसी तरह के तर्क के अनुरूप है। इस बग के सभी व्यवहार अजीब हैं लेकिन ऐसा लगता है कि यह इसे कुछ उपयोगी पैटर्न में स्थिर करने के लिए प्रतीत होता है और शायद यह आपकी मदद करता है।

कोई और यहां कुछ गहराई से समझ सकता है जो यहां खेल रहा है और शायद कुछ और सलाह/स्पष्टीकरण प्रदान कर सकता है।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-20 12:23:34

मैं इस मुद्दे में लगातार चल रही है:

आप परीक्षण यहाँ देख सकते हैं। जब अपमानजनक तत्व के मूल कंटेनर प्रतिशत या ईएमएस का उपयोग करके आकार में आते हैं, तो वेबफॉन्ट टूट जाता है। जब यह पिक्सल के साथ आकार दिया जाता है, तो फ़ॉन्ट ठीक काम करता है।

यह पता लगाने के लिए कि क्या यह अकेला मुद्दा था, मैंने तीन ब्लॉक के साथ एक बहुत ही मूल पृष्ठ बनाया,% का उपयोग करके एक आकार का आकार, ईएमएस का उपयोग करके एक आकार और एक पीएक्स का उपयोग कर। नेक्सस 7 पर हर ब्लॉक में वेब फ़ॉन्ट ठीक है, जो मुझे विश्वास दिलाता है कि यह अकेला मुद्दा नहीं है।

मुझे लगता है कि यदि आप टैबलेट के अभिविन्यास को स्विच करते हैं, और फिर वापस स्विच करते हैं, तो वेबफॉन्ट सभी ठीक दिखाई देते हैं। और अधिक अजीब बात यह है कि वही वेबफॉन्ट साइट के कुछ हिस्सों में ठीक दिख रहा है, न कि दूसरों में।

नेक्सस 7 पर वेबफोंट के साथ मेरा समग्र अनुभव बेहद असंगत और भ्रमित है। मुझे नहीं लगता कि यह एक वेबकिट बग है या एंड्रॉइड बग है क्योंकि क्रोम के रूप में मेरे एंड्रॉइड फोन ने मुझे कभी भी सिरदर्द नहीं दिया है।

यह बहुत निराशाजनक है ...

स्रोत

2013-02-12 18:41:29 user1380540

@ पैरा टैग पर फॉन्ट-फेस प्रतिपादन मुद्दा, क्रोम एंड्रॉयड 4

उत्तर

संबंधित मुद्दे