2012-04-04 9 views
9

जैसा कि मैंने शीर्षक में उल्लेख किया है, सीएसएस फ़ॉन्ट-फ़ैमिली, कस्टम फ़ॉन्ट (फ़ॉन्ट-फेस) का उपयोग करते समय, यह गड़बड़ हो जाता है (काला पृष्ठभूमि, काला पाठ (मुझे लगता है))) ओपेरा में ऑटो पूर्ण ड्रॉप डाउन सूची।फ़ॉन्ट-फेस, ओपेरा ब्राउज़र में स्वत: पूर्ण ड्रॉप डाउन सूची को गड़बड़ कर देता है

input[type='text'], input[type='password'], input[type='email'], input[placeholder] { 
    font-size: 1.2em; 
    font-family: sans-serif; 
    color: #2A873A; 
    padding-left: 25px; 
} 

कोड ऊपर ठीक काम करता है, लेकिन अगर मैं की जगह "font-family: sans-serif;" कुछ फ़ॉन्ट-फेस फ़ॉन्ट (Google वेब फोंट भी) के साथ, फिर समस्या शुरू होती है।

यहां कार्रवाई में "बग" का स्क्रीनशॉट है।

enter image description here

पी.एस. मुझे जिक्र करना चाहिए कि वह ओपेरा का मूल स्वत: पूर्ण है, कस्टम जेएस, ड्रॉपडाउन सूची नहीं।

संपादित करें: http://jsfiddle.net/burCR/

+1

समस्या को देखना मुश्किल है, फिडल सिर्फ एक इनपुट बॉक्स है। शेष पृष्ठ और सीएसएस को देखने की आवश्यकता है। – Undefined

+0

@ जुलिएन एटियेन मुझे समझ में नहीं आता कि आपका क्या मतलब है? समस्या उस इनपुट तत्व पर भी दिखाई दे रही है (jsfiddle उदाहरण पर)। कम से कम Win7 64x, v11.62 और 12 अल्फा पर। वैसे भी मैंने ओपेरा टीम को बग की सूचना दी। –

+0

मुझे पता है कि यह कुछ अन्य ब्राउज़रों जैसे कोडा में होता है, लेकिन यह केवल कुछ इनपुट रूपों के लिए है। क्या आप पाठ को हाइलाइट कर सकते हैं? शायद पृष्ठभूमि- रंग: सफेद; ? – Luke

उत्तर

1

आप अपने सीएसएस में सीधे फ़ॉन्ट निर्दिष्ट करने की कोशिश की? उदाहरण के लिए:

div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;} 

ध्यान रखें नेस्ट तत्वों, कस्टम फ़ॉन्ट के साथ अटक जाते हैं, इसलिए यदि आप ऊपर नहीं करते हैं, आप भी बहुत अच्छी तरह से अपने 'नेस्ट तत्वों' में font-family:inherit पड़ सकता है।

अतिरिक्त मदद के लिए, अपनी साइट

1

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

http://www.w3schools.com/cssref/css_websafe_fonts.asp

और अगर है कि माइक्रोसॉफ्ट वर्ड से आप चाहते हैं फ़ॉन्ट लेने की कोशिश और एक websafe एक का उपयोग कर आप कस्टम डालने फ़ॉन्ट के बजाय करने के लिए @fontface का उपयोग काम नहीं करता।

और आखिरकार फॉर्म पर अपने फ़ॉन्ट-फ़ैमिली का उपयोग करने का प्रयास करें और इनपुट को फ़ॉन्ट का वारिस प्राप्त करें। उम्मीद है कि इससे मदद मिली।

1

सीधे फ़ॉन्ट निर्दिष्ट करने के लिए डिट्टो। आप बेस 64 एन्कोडिंग का उपयोग करने का प्रयास भी कर सकते हैं, जो मेरे अनुभव में खूबसूरती से काम करता है और महान क्रॉस-ब्राउज़र संगतता के साथ।

1

आप पृष्ठभूमि और पाठ दोनों के लिए रंग निर्दिष्ट कर सकते हैं।

input { 
    background-color: white; 
    color: black; 
    font-family: "My Fontface Font", Verdana, ms serif; 
} 
संबंधित मुद्दे