वेबकिट फ़ॉन्ट प्रतिपादन जब आईफ़्रेम फ़्लैश सामग्री एम्बेड करने के लिए उपयोग किया जाता है

Question

यदि आप मैक पर हैं तो कृपया http://jsfiddle.net/CVwXV/2/ देखें।

जब आप मैक पर क्रोम या सफारी (वेबकिट) पर देखते हैं तो टेक्स्ट बहुत हल्का छाया/रंग पर कूदता है।

मैक पर फ़ायरफ़ॉक्स पर यह ठीक है।

यदि आप एचटीएमएल में दूसरे लेख को यूट्यूब वीडियो के साथ हटाते हैं और फिर से चलाते हैं, तो यह वेबकिट में ठीक है।

कोई विचार? यह निश्चित रूप से सिर्फ मेरी मशीन नहीं कर रहा है।

धन्यवाद।

संपादित करें: एंटीअलाइजिंग के साथ कुछ करने के लिए लगता है। http://jsfiddle.net/CVwXV/3/ तो मुझे क्या करना ..

-webkit-font-smoothing: antialiased !important; 
font-smoothing: antialiased !important; 

तो फिर वहाँ कोई कूद है ... लेकिन यह अभी भी बहुत फ़ायरफ़ॉक्स और क्रोम के बीच अलग दिखता है। बाईं ओर एफएफ, दाईं ओर क्रोम।

Answer 1

ठीक है, मैं इस एक ही समस्या आ रहा था और मुझे लगता है मैं एक "ठीक है" समाधान नहीं मिला है। मेरे पास एक div था जो एक आईफ्रेम को थोड़ा ओवरलैप कर रहा था जिसमें फ्लैश था। उस ओवरलैपिंग div में यह फ़ॉन्ट-चिकनाई खराब हो गई थी। इसे ठीक करने के लिए मुझे सिर्फ iframe और ओवरलैपिंग div दोनों पर z-index डालना पड़ा। इसे काम करने के लिए iframe div (शीर्ष z-index) के शीर्ष पर होना चाहिए। उपर्युक्त उदाहरण में ऐसा नहीं लगता है कि कुछ भी iframe ओवरलैप कर रहा है, लेकिन प्रत्येक तत्व की सीमा थोड़ा ओवरलैप हो सकती है। आप सफारी या क्रोम में वेब इंस्पेक्टर का उपयोग कर इसे देख पाएंगे। लेकिन मैं सिर्फ iframe पर z-index डालकर और उन तत्वों को जोड़कर शुरू करूंगा जो फ़ॉन्ट-स्मूथिंग को गड़बड़ कर चुके हैं।

Answer 2

मैंने ऊपर मार्कमार्क के लिंक का पालन किया और अपने स्वयं के कुछ परीक्षण किए। परीक्षण और त्रुटि के माध्यम से मैंने इस समस्या को उस साइट पर तय कर दिया है जिस पर मैं काम कर रहा हूं। यह सफारी और क्रोम में तीन अलग-अलग उदाहरणों में हुआ था।

पहला उदाहरण तब होता था जब टेक्स्ट युक्त तत्वों के समान कंटेनर में ड्रॉप डाउन दिखाया जाता था। जब jQuery में .show() को कॉल किया गया था तो पाठ हल्का हो जाएगा और जब .hide() कहा जाता था तो यह भारी हो जाएगा।

दूसरा उदाहरण तब था जब टेक्स्ट युक्त एक निश्चित तत्व टेक्स्ट युक्त एक अन्य तत्व को ओवरलैप करता था, यह हल्का हो जाएगा और जब पाठ की निम्न परत निश्चित तत्वों की प्रतिलिपि को फिर से भारी हो जाएगी।

तीसरा था जब किसी पृष्ठ पर एक फ्लैश तत्व लोड होता था तो फ़ॉन्ट हल्का हो जाएगा।

ऐसा प्रतीत होता है कि जब पाठ हल्का हो रहा था तो फ़ॉन्ट का प्रतिपादन 'उप-पिक्सेल-एंटीअलाइज्ड' से 'एंटीअलाइज्ड' में बदल रहा था।

-webkit-font-smoothing: antialiased सेट करके सभी प्रकारों पर 'एंटीअलाइज्ड' चिकनाई को मजबूर कर;

शरीर पर फ़ॉन्ट पृष्ठ लोड पर एक कुरकुरा हल्का वजन प्रदान किया जाता है और इनमें से किसी भी मामले में नहीं बदला जाता है।

Answer 3

मुझे यह समस्या भी थी।

मैंने आईफ्रेम को दो divs में रखकर इसे ठीक किया। पहला div I स्थिति सेट करता है: सापेक्ष, चौड़ाई: 100%, और ऊंचाई मेरे खिलाड़ी की वांछित ऊंचाई तक। दूसरा div मैं स्थिति में सेट: पूर्ण।

आईफ़्रेम अब पूरी तरह से स्थित div में, यह पृष्ठ पर पाठ को सफारी में पृष्ठ लोड पर एंटीअलाइज करने के लिए मजबूर नहीं करता है।