मैं हेल्वेटिका नियू लाइन हाइट्स क्रॉस-ब्राउजर (बोल्ड टेक्स्ट के बारे में नहीं) को कैसे मान सकता हूं?

Question

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

नीचे दी गई छवि देखें, यह एरियल, हेल्वैटिका नियू स्टडी, और हेल्वेतिका नियू प्रो है। विंडोज क्रोम सभी तीनों को एक चैंप की तरह संभालता है, लेकिन बाकी यहां जंगली असंगत हैं। वे अभी लाइन-ऊंचाई 18px पर सेट हैं, मैंने लाइन-ऊंचाई की भी कोशिश की: 1, लेकिन इसका कोई फायदा नहीं हुआ।

मैं इस परीक्षण के प्रयोजनों के लिए उपयोग कर रहा हूँ HTML/CSS:

<style type="text/css"> 

    @font-face { font-family: "Helvetica Neue Std"; src: url('HelveticaNeueLTStd-Md.otf') format("opentype"); } 
    @font-face { font-family: "Helvetica Neue Pro"; src: url('HelveticaNeueLTPro-Md.otf') format("opentype"); } 

    .box { 
     float: left; 
     padding: 10px; 
     border: 1px solid red; 
     font-size: 18px; 
     line-height: 18px; 
    } 

    .box .text_1 { font-family: Arial; } 
    .box .text_2 { font-family: "Helvetica Neue Std" } 
    .box .text_3 { font-family: "Helvetica Neue Pro" } 

</style> 

<div class="box"> 
    <span class="text_1">Aw Nuts</span> 
</div> 

<div class="box"> 
    <span class="text_2">Aw Nuts</span> 
</div> 

<div class="box"> 
    <span class="text_3">Aw Nuts</span> 
</div> 

I Am सिर्फ भाग्य यहाँ से बाहर? मैं इस बिंदु पर केवल एरियल का उपयोग करने पर विचार कर रहा हूं, क्योंकि टूलबार और बटन बनाने की कोशिश कर रहा है जहां पाठ लंबवत केंद्रित है, एक दुःस्वप्न साबित हो रहा है। मैं निश्चित रूप से ओएस और ब्राउज़र के लिए स्नीफ नहीं करना चाहता हूं और प्रत्येक तत्व के लिए कस्टम लाइन-हाइट्स लिखना नहीं चाहता हूं।

Answer 1

मैं why line height is a pain पर इस बारे में गहराई से पृष्ठभूमि टुकड़ा पेशकश कर सकते हैं।

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

Answer 2

कृपया इसे आज़माएं।

*{ 
    margin: 0px; 
    padding: 0px; 
    font-size: 100%; 
    vertical-align: baseline; 
} 

font-size: 100% स्वचालित रूप से अपने फोंट चूक रीसेट कर देगा और आप मैन्युअल रूप से पी पर font-size निर्दिष्ट करने की आवश्यकता एक div आदि

Answer 3

यह vertival metrics समस्या जैसा दिखता है। फ़ॉन्ट कभी भी संरेखित नहीं होगा क्योंकि इसमें खराब लंबवत मीट्रिक हैं। ब्राउज़रों में निरंतर फ़ॉन्ट को प्रस्तुत करने का एकमात्र तरीका अपने लंबवत मीट्रिक को ठीक करना है।

अधिकांश फ़ॉन्ट प्रदाता आपको इसे डाउनलोड करने से पहले फ़ॉन्ट के लंबवत मीट्रिक को अपडेट और ठीक करने की अनुमति देते हैं। हालांकि वे उस विकल्प को अलग-अलग कॉल कर सकते हैं। उदा। फ़ॉन्ट्सक्वायरल इसे Auto-Adjust Vertical Metrics कहते हैं, myFonts.com इसे Line Height Adjustments कहते हैं।

Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?