मुझे पता है कि विभिन्न ब्राउज़र विभिन्न तरीकों से पाठ प्रस्तुत करते हैं - और एक बिंदु पर, मैं इसके साथ शांत हूं। हालांकि, एक प्रोजेक्ट के लिए आइकन फोंट का उपयोग करने के प्रयोग पर, फ़ायरफ़ॉक्स, विशेष रूप से मुझे परेशान कर रहा है।फ़ायरफ़ॉक्स आइकन फ़ॉन्ट ओवरली बोल्ड एंटी-एलिज़िंग
अनिवार्य रूप से मेरे पास सोशल मीडिया आइकन की एक पंक्ति है, जो @ फ़ॉन्ट-फेस और कुछ छद्म वर्गों के माध्यम से प्रदर्शित होती हैं। फ़ायरफ़ॉक्स को उन्हें अच्छी तरह से प्रस्तुत करने के साथ थोड़ा सा मुद्दा है ...
यहां वे क्रोम बनाम फ़ायरफ़ॉक्स की तरह दिखते हैं।
क्रोम 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; यह नहीं कि यह फ़ायरफ़ॉक्स को वैसे भी प्रभावित करता है।
आप की कोशिश की 'font- वजन है? मेरे पास एक फ़ॉन्ट के साथ एक ही समस्या थी और फ़ॉन्ट-वेट बदलने से यह काम करता था। – onimojo
@onimojo हाँ मैंने विभिन्न प्रकार के वर्गों और शैलियों पर 'फ़ॉन्ट-वेट: 100-900' जोड़ने की कोशिश की। असल में केवल इससे ही बदतर हो गया, एक बार जब आप 500 से अधिक हो गए ... :( –
@alexander क्या आपने कभी यह पता लगाया है? मुझे एक ही समस्या है –