मैं एक शीर्ष सीमा को फ़ॉन्ट के ग्लिफ पर कैसे सख्त कर सकता हूं?

Question

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

इस संहिता पेन उदाहरण मुद्दे को दर्शाता है: http://codepen.io/DrSpatula/pen/BAgqG

Answer 1

यह बहुत गंदा है, लेकिन आप एक दोहराई जाने वाली पृष्ठभूमि के रूप में .gif एक एक पिक्सेल की कोशिश की है तो आप इसके फॉन्ट सापेक्ष स्थिति है निर्धारित कर सकते हैं?

Answer 2

शायद मैं मदद कर सकता हूं। मैंने आपके लिए देखने के लिए एक छोटा सा पहेली बनाया है। (http://jsfiddle.net/dgxJh/1/)

मुझे डर है कि इस समाधान के साथ आपको प्रत्येक फ़ॉन्ट आकार और प्रत्येक फ़ॉन्ट के लिए गुलाबी रेखा के साथ अवधि को दोबारा पोस्ट करना होगा। लेकिन संक्षेप में आप निम्नलिखित कोड का उपयोग करके अपने पाठ पर एक काल की स्थिति होगी:

span{ 
    height: 1px; 
    width: 100%; 
    background: pink;  
    display: block; 
    position: absolute; 
    top: 0.6em; 
} 

मत भूलना अपने कंटेनर रिश्तेदार

Answer 3

अब आप पी line-height आवेदन कर रहे हैं स्थिति। यदि आप इसे वहां हटा देते हैं, और span.text पर लाइन-ऊंचाई लागू करते हैं, और इसे 1.55ex के मान पर सेट करते हैं, तो यह ठीक से दिखाता है।

तो अपने सीएसएस होगा:

p { 
     font-size: 72px; 
     position: relative; 
     margin: 0; 
     padding: 0; 
    } 

    p span { 
     margin: 0; 
     padding: 0; 
     display: inline-block; 
    } 

    .sans { 
     font-family: sans-serif; 
    } 

    .text { 
     border-top: 1px solid blue; 
     line-height: 1.55ex; 
    } 

    .rule { 
     height: 1ex; 
     border-top: 1px dotted red; 
     border-bottom: 1px solid blue; 
     position: relative; 
     left: -7.25em; 
     width: 7.75em; 
     top: 1px; 
    }