सीएसएस कस्टम फ़ॉन्ट खड़ी ऑफसेट (बग?)

Question

मैं इस विधि के साथ मेरी सीएसएस में कस्टम फ़ॉन्ट का उपयोग करें:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'); 
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
.gabriola { 
    font-size: 20px; 
    line-height: 20px; 
    height: 20px; 
    background: red; 
} 

<div class="gabriola">Some texty text here</div> 

हर ब्राउज़र renders ऊर्ध्वाधर के साथ अपने आप जिस तरह से इस फोंट शीर्ष और इस

की तरह नीचे ऑफसेट

मैं गलत क्या कर रहा हूं? धन्यवाद

Answer 1

यह संभव है कि आप कुछ भी गलत नहीं कर रहे हैं। यहां कुछ बिंदु दिए गए हैं जो लागू हो सकते हैं, कुछ आपके द्वारा नियंत्रित, कुछ नहीं।

1. बस सुनिश्चित करने के लिए, स्पष्ट रूप से vertical-align: baseline सेट करें।
2. विभिन्न फाइलें (.eof, .woff, .ttf) स्वयं को परिभाषित नहीं किया जा सकता है, और इस प्रकार विभिन्न ब्राउज़र विभिन्न फ़ाइलों का उपयोग कर रहे हैं और मतभेद प्रदर्शित कर रहे हैं।
3. सुनिश्चित नहीं हैं कि अगर दो src कॉल होने बातें खिलवाड़ है, लेकिन आप एक दूसरे को नष्ट करने की कोशिश कर सकते हैं:

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

ये सब मात्र अनुमान है। आपको # 1, 3 का परीक्षण करना होगा। यदि समस्या # 2 है, तो मुझे यकीन नहीं है कि एक सुरुचिपूर्ण समाधान है।

नहीं है, बेशक, this site पर चेतावनी:

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

अद्यतन

This post संभवतः प्रतिपादन मुद्दों को हल करने के बारे में कुछ सुझाव देता है। यह फ़ॉन्ट गिलहरी के लिए है, और वह विशेष रूप से नोट:

आप किट डाउनलोड किया है, तो आप जनरेटर के साथ फ़ॉन्ट पुनः प्रयास कर सकते हैं। हम जनरेटर को आवधिक समायोजन करते हैं कि फ़ॉन्ट के संकेत या प्रतिपादन में सुधार कर सकता है।

लेकिन उन्होंने यह भी पुष्टि करता है,

नहीं हिरन पारित करने के लिए है, लेकिन सबसे आम कारण एक बुरा मूल फ़ॉन्ट है।

जो मेरे बिंदु # 2 के साथ जाता है।

Answer 2

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

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 3

मैं जानता हूँ कि यह 5 साल हो गया जब ओपी प्रश्न पूछा, लेकिन मैं पाठ आधारभूत गठबंधन सही ढंग से हो रही है पर इस महान तकनीक मिल गया।

असल में, टेक्स्ट कंटेनर लाइन-ऊंचाई के साथ एक इनलाइन-ब्लॉक होना चाहिए: 0; उसके बाद, आप एक इनलाइन-ब्लॉक छद्म तत्व बना सकते हैं और उसकी ऊंचाई सेट line-height आप चाहते थे के अनुसार:

span { 
 
    font-size: 2em; 
 
    background: red; 
 
} 
 
span.baseline-align { 
 
    vertical-align: baseline; 
 
} 
 

 
span.true-baseline-align { 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 
span.true-baseline-align::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 1em; // this is where you control line-height 
 
}

<span>Normal text</span> 
 
<br><br> 
 
<span class="baseline-align">With vertical-align: baseline</span> 
 
<br><br> 
 
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/

नहीं