फ़ॉन्ट फ़ायरफ़ॉक्स बनाम क्रोम में अलग तरह से प्रदर्शित होता है

Question

ऐसा लगता है कि मेरा मेनू बार फ़ायरफ़ॉक्स में क्रोम की तुलना में एक अलग फ़ॉन्ट खिंचाव के साथ प्रदर्शित किया गया है। निम्नलिखित देखें:

यहाँ इस तत्व के लिए सीएसएस लागू है:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

जहां तक ​​मैं उस फ़ॉन्ट के संबंध में सब कुछ बता सकता हूं, वह बिल्कुल वैसा ही है, फिर भी वे अलग तरह से प्रदर्शित होते हैं (चित्र देखें)। क्यों?

Comments

क्या आपने पहले CSS रीसेट किया है?

— केई

@kei: रीसेट का असर नहीं दिखता

— गोरो

दिलचस्प। मुझे आपकी छवि के समान परिणाम मिल रहा है: jsfiddle.net/YGwcn यह प्रतीत होता है कि प्रत्येक ब्राउज़र शैली की व्याख्या कैसे करता है।

— केई

Answer 1

Chrome WebKit रेंडरिंग इंजन का उपयोग करता है। फ़ायरफ़ॉक्स गेको इंजन का उपयोग करता है। दोनों व्याख्या और प्रदर्शन थोड़े अलग प्रकार से करते हैं, जैसा कि IE9 + और ओपेरा में उपयोग किए जाने वाले DirectX और वेगा ग्राफिक्स इंजन करते हैं।

आप ब्राउज़रों को पहचान के साथ पाठ को प्रस्तुत करने के लिए बाध्य नहीं कर सकते हैं, लेकिन आप यह सुनिश्चित करने के लिए कुछ चीजें कर सकते हैं कि आपका नेविगेशन ब्राउज़रों में समान चौड़ाई लेता है:

1. अपने नेविगेशन बार तत्वों के प्रकार के बजाय छवियों या SVGs का उपयोग करें। यदि आपका नेविगेशन क्षेत्र अक्सर बदलने की संभावना नहीं है तो यह उपयोगी साबित हो सकता है। जैसे www.apple.com

2. सीएसएस के साथ प्रत्येक नेविगेशन तत्व की चौड़ाई को ठीक करें। ब्राउज़रों के बीच पाठ का आकार अभी भी अलग-अलग दिखाई देगा, लेकिन यदि आप <li>अपने नेविगेशन क्षेत्र में प्रत्येक तत्व को एक निश्चित पिक्सेल चौड़ाई देते हैं, तो प्रत्येक लिंक का बाउंडिंग बॉक्स ब्राउज़र में बहुत समान होगा और नौसेना क्षेत्र की कुल चौड़ाई समान होनी चाहिए।

Comments

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

— ऑली हॉजसन

@OllyHodgson ज़रूर। डबल-आकार के पीएनजी या एसवीजी (जो कि अपने नेवी के लिए ऐप्पल का उपयोग करता है) उच्च-रिज़ॉल्यूशन स्क्रीन के लिए सबसे अच्छा होगा।

— निक

@ निक - हां, एसवीजी सबसे अच्छा समाधान होगा।

— m93a

इस मामले में यह नहीं होगा। फ़ायरफ़ॉक्स letter-spacingएसवीजी तत्वों पर समर्थन नहीं करता है ।

— Y29295

@ Yay295 आप एसवीजी में फोंट को रेखांकित कर सकते हैं।

— निक

Answer 2

अलग-अलग ब्राउज़रों (और अलग-अलग ऑपरेटिंग सिस्टम पर) के बीच फॉन्ट प्रतिपादन में अंतर जीवन का एक तथ्य है। आपको बस यह सुनिश्चित करना है कि यदि फ़ॉन्ट विभिन्न चौड़ाई में प्रदर्शित होता है तो आपका डिज़ाइन अभी भी सामना कर सकता है।

Answer 3

मामले में किसी को भी यह आता है, मेरे लिए समस्या थी letter-spacing। क्रोम और फ़ायरफ़ॉक्स संपत्ति को अलग तरह से संभालते हैं।

मेरी समस्या letter-spacingअन्य तत्वों की स्थिति को प्रभावित कर रही थी; विशेष रूप से नौसेना मेनू में कुछ चित्र। संपत्ति को हटाकर मेरी समस्या को तुरंत हल कर दिया गया।

मैंने यह भी पढ़ा है कि विशेष रूप से .pointमानों का उपयोग करने से 2 ब्राउज़रों के बीच परिवर्तन प्रभाव हो सकता है, जो मेरे मामले में सच था।

Answer 4

इसी तरह का मुद्दा यहाँ बताया गया है

आप अपने सीएसएस को रीसेट कर सकते हैं

http://developer.yahoo.com/yui/reset/ आशा है कि कम से कम आपको कुछ सुराग मिल जाए

Answer 5

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

Answer 6

दो ओएस पर 6 ब्राउज़र / 4 रेंडरिंग इंजन का परीक्षण करने के बाद। मैंने पाया है कि लाइन-रिक्ति के साथ भी ज्यादातर वही थे। मैं एक मिनट में खिड़कियों और लिनक्स के साथ अंतर को देखूंगा।

मुझे लगा कि पैलेटिनो फॉन्ट हर जगह उपलब्ध है, लेकिन क्रोम बार-बार रोम पर गिरता है, जो थोड़ा छोटा होता है, डिफ़ॉल्ट फोंट का परिणाम (क्रोम अलग) होता है, जो मुझे थोड़ा भ्रमित करता है।

वैसे भी यदि आप बार-बार रोम निर्दिष्ट करते हैं या फ़ॉन्ट फ़ाइल की आपूर्ति के लिए @fontface का उपयोग करते हैं! आप अपनी नौसेना सलाखों को कमजोर बनाने में सक्षम हो सकते हैं ;-)

Answer 7

मुझे एक समान समस्या थी और एक समाधान मिला:

का उपयोग करते हुए:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

फ़ायरफ़ॉक्स में, यह बहुत अच्छा लग रहा है। क्रोम में, अक्षर रिक्ति अजीब थी। निकाला जा रहा है optimizelegibilityशैली चाल किया था। दोनों ब्राउज़र अब समान रूप से प्रस्तुत करते हैं।

मैंने वेबकिट के लिए शैली को हटाने और अन्य ब्राउज़रों के लिए जगह छोड़ने का फैसला किया। अब ठीक लग रहा है।

Answer 8

मुझे ओपन-संस के साथ भी ऐसी ही समस्या थी, इसने मेरे लिए ऐसा किया:

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;