अलग-अलग ब्राउज़रों को अलग-अलग फ़ॉन्ट्स को अलग-अलग कैसे रोकें?

Question

मुझे सभी ब्राउज़रों में निरंतर फ़ॉन्ट शैली बनाए रखने की कोशिश करने में कोई समस्या है। जैसा कि नीचे देखा गया है, सफारी की फ़ॉन्ट प्रतिपादन प्रणाली क्रोम के फ़ॉन्ट वजन से फ़ॉन्ट वजन कम करती है।

सफारी:

क्रोम:

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

यहां मैंने कोशिश की है।

1. -webkit-font-smoothing: antialiased;

2. font-weight: 800;

3. text-rendering: optimizeLegibility;

Answer 1

ब्राउज़र, द्वारा और बड़े, अलग फ़ॉन्ट प्रतिपादन इंजन/तरीकों की है। अधिक जानकारी के लिए, मैं this, this, और/या this पढ़ने की अनुशंसा करता हूं।

ईमानदारी से, औसत उपयोगकर्ता के लिए, अंतर सभी ध्यान देने योग्य नहीं होगा और अधिकांश भाग के लिए, किसी भी चीज के पिक्सेल-परिपूर्ण क्रॉस-ब्राउज़र डिस्प्ले को लंबे समय से प्रिंट-वर्ल्ड के रूप में लंबे समय से त्याग दिया गया है।

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

उम्मीद है कि मदद करता है।

Answer 2

तथ्य ब्राउज़र के साथ बहुत सारे मतभेद हैं और फोंट के लिए अलग-अलग डिफ़ॉल्ट वजन/शैलियों को छोड़ देते हैं या छोड़ देते हैं। ऐसा होने से रोकने के लिए सुनिश्चित करें कि आपके सीएसएस में font-weight: normal और font-style: normal आपके @fontface कोड ब्लॉक में हैं।

आपको HTML तत्वों के लिए आवश्यक शैलियों को लागू करने की आवश्यकता है।

तो अगर मैं geo-light नामक एक फॉन्ट है मुझे क्या करना होगा:

@font-face {font-family: 'geo-light'; 
    src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

और फिर प्रत्येक तत्व उस फ़ॉन्ट का उपयोग करता है के लिए विशिष्ट शैली जोड़ें।

/*SET STYLES ON ELEMENTS*/ 
h1, h2, h3, h3 > a, p, li { 
    font-family: 'geo-light', sans-serif; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: none; 
} 

मुझे शायद ही कभी साइट पर यह देखा जाता है, और पूर्व-कर्सर आपकी छवि में क्या हो रहा है। उन अंतरों को एंटी-एलियासिंग मुद्दे के कारण नहीं किया जा रहा है।

मूल उत्तर में यह पहला और तीसरा लेख एक पूरी तरह से अलग समस्या के बारे में है और मध्य लेख जो कि लिंक किया जा रहा है, इसका मतलब है कि आपके छवि उदाहरणों में विपरीत प्रभाव हो रहा है।