फ़ायरफ़ॉक्स आइकन फ़ॉन्ट ओवरली बोल्ड एंटी-एलिज़िंग

Question

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

अनिवार्य रूप से मेरे पास सोशल मीडिया आइकन की एक पंक्ति है, जो @ फ़ॉन्ट-फेस और कुछ छद्म वर्गों के माध्यम से प्रदर्शित होती हैं। फ़ायरफ़ॉक्स को उन्हें अच्छी तरह से प्रस्तुत करने के साथ थोड़ा सा मुद्दा है ...

यहां वे क्रोम बनाम फ़ायरफ़ॉक्स की तरह दिखते हैं।

क्रोम 23.0.1271.101 (मैक)

http://cl.ly/image/0M3t2S3N2A38/

(बिल्कुल सही)

फ़ायरफ़ॉक्स 17.0.1 (मैक)

http://cl.ly/image/053d2J0J312K

(नहीं- बहुत सही)

आप शायद इस मुद्दे को मैं देख सकता है ...

मैं भी अगर यह सिर्फ फ़ायरफ़ॉक्स नहीं है देखने के लिए कई अन्य ब्राउज़रों देख लिया है। यह सिर्फ फ़ायरफ़ॉक्स है। यहां तक ​​कि आईई भी एक अच्छा काम करता है।

कोड:

सीएसएस

@font-face { 
    font-family: 'icomoon'; 
    src:url('fonts/icomoon.eot'); 
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
    url('fonts/icomoon.svg#icomoon') format('svg'), 
    url('fonts/icomoon.woff') format('woff'), 
    url('fonts/icomoon.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 


[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    font-family: 'icomoon'; 
    font-style: normal; 
    speak: none; 
    font-weight: normal; 
    line-height: 1; 
    text-align: center; 
} 


.icon-flkr:before { 
    content: "\2b"; 
} 
.icon-fbk:before { 
    content: "\2c"; 
} 
.icon-twitter:before { 
    content: "\3e"; 
} 
.icon-lfm:before { 
    content: "\24"; 
} 
.icon-lkdin:before { 
    content: "\25"; 
} 
.icon-inst:before { 
    content: "\26"; 
} 

एचटीएमएल

<ul id="footer_social_list" class="group"> 
    <li><a href="#" class="icon-twitter" title="Follow me on Twitter"></a></li> 
    <li><a href="#" class="icon-fbk"></a></li> 
    <li><a href="#" class="icon-lkdin"></a></li> 
    <li><a href="#" class="icon-flkr"></a></li> 
    <li><a href="#" class="icon-inst"></a></li> 
    <li><a href="#" class="icon-lfm"></a></li> 
</ul> 

मैं बहुत कुछ कोशिश करते हैं और इसे ठीक करने की कोशिश की है। सीएसएस के साथ अस्पष्टता बदलने से; पाठ छाया की कोशिश करने के लिए; @ फ़ॉन्ट-फेस, कक्षाओं और वंचित शैलियों दोनों के वजन को बदलना; "डेटा-आइकन" का उपयोग करना; यह भी सुनिश्चित करना कि प्रत्येक आइकन पिक्सेल ग्रिड से गठबंधन है।

फ़ायरफ़ॉक्स में अभी तक कुछ भी सुधार नहीं हुआ है, और मैं IE9 में Instagram आइकन के थोड़ा अपवाद के साथ कहूंगा, सबकुछ हर ब्राउज़र में अच्छा दिखता है।

तो फ़ायरफ़ॉक्स ऐसा क्यों करता है? और क्या ऐसा कुछ है जो मैं इसे करने के लिए कर सकता हूं?

पीएस: मैंने जोड़ा नहीं है -webkit-font-smoothing: antialiased; यह नहीं कि यह फ़ायरफ़ॉक्स को वैसे भी प्रभावित करता है।

Answer 1

font-weight:normal !important; 

यह स्पष्ट उत्तर की तरह प्रतीत हो सकता है लेकिन किसी ने इसका उल्लेख नहीं किया है। बहुत संभव है कि आपके पास लाइन के साथ कहीं भी आपके एंकर टैग पर !important है, जिससे उन्हें सामान्य रूप से भारित किया जा सके।

क्या आप सभी ब्राउज़रों में क्या होता है के बारे में बात कर रहे हैं: जब आप एक गहरे रंग की पृष्ठभूमि पर प्रकाश पाठ का उपयोग, पाठ और अधिक "भारी" लगता है

Answer 2

यह एक और स्पष्ट जवाब है कि कोई भी उल्लेख किया है। आइकन फोंट के लिए भी यही सच है ... छोटे विवरण बाहर निकल जाएंगे। (सीएसएस फ़ॉन्ट-स्मूथिंग और टेक्स्ट-रेंडरिंग गुण हैं जो इसे सही करने में मदद करते हैं, लेकिन वे सभी ब्राउज़रों में जरूरी नहीं है।See here.)

यदि आप हल्के सर्कल आकार (एसवीजी का उपयोग किए बिना) पर एक गहरा रंगीन आइकन चाहते हैं, तो एक तरफ आप इसे प्राप्त कर सकते हैं, सर्कल के बिना आइकन का उपयोग करना है, फिर सीएसएस के साथ अपनी सर्कल पृष्ठभूमि बनाएं ।

आपको एक वास्तविक नॉकआउट नहीं मिलेगा (आइकन वास्तव में सर्कल में नकारात्मक स्थान नहीं होंगे, इसलिए आपके बटन के पीछे कोई भी पृष्ठभूमि पैटर्न आइकन के माध्यम से नहीं दिखाया जाएगा), लेकिन आप प्रकाश-पाठ से बचेंगे अंधेरे-पृष्ठभूमि bleedout।

बेशक, आप पुराने संस्करण आईई में अपनी सीमा-त्रिज्या भी खो देंगे ... इसलिए वजन (अहम) अधिक मायने रखता है। 400`:

Answer 3

-moz-osx-font-smoothing: grayscale; 

See the discussion leading to this new vendor prefixed solution for Firefox.