संख्या और पाठ

Question

के बीच असंगत अंतर मुझे अजीब अंतरंग समस्याएं मिलीं। संख्या और प्रत्येक पाठ समानांतर है। और 1, 4, 7 और 'प्रत्येक' पाठ के बीच अलग अंतर है। हम इस समस्या को कैसे ठीक कर सकते हैं या इसे ठीक नहीं किया जा सकता है। मैंने किसी भी अंतर और अतिरिक्त सीएसएस गुणों का उपयोग नहीं किया है।

@import url('https://fonts.googleapis.com/css?family=Spectral'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral'); 
 

 
.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: 'Open Sans', sans-serif; 
 
}

<p> 
 
    <span class="bigger">81</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span> 
 
    <small>each</small> 
 
</p> <br>

Answer 1

फ़ॉन्ट का पत्र रिक्ति का मुद्दा है कि। सभी पात्रों के लिए समान दूरी प्राप्त करने के लिए आपको monospace फ़ॉन्ट का उपयोग करना चाहिए।

नीचे स्निपेट आज़माएं।

.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: monospace; 
 
}

<p> 
 
    <span class="bigger">81</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span> 
 
    <small>each</small> 
 
</p> <br>

Answer 2

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

एक और सुधार जो आप अपने कोड में कर सकते हैं टैग के बीच की जगहों को हटा रहा है।

नीचे कोड की जाँच करें:

@import url('https://fonts.googleapis.com/css?family=Spectral'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral'); 
 

 
.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: 'Open Sans', sans-serif; 
 
}

<p> 
 
    <span class="bigger">81</span><small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span><small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span><small>each</small> 
 
</p> <br>

Answer 3

हालांकि एक monospace फ़ॉन्ट का उपयोग करके एक अच्छा समाधान नहीं है, तो आप अगर यह सही ओपन टाइप सुविधाओं की है अपने मूल फॉन्ट के साथ इस का समाधान कर सकता है।

किसी स्थान पर मौजूद स्थान में अंतर अंकों की चौड़ाई के कारण होता है (जैसा कि कर्नेल या अक्षर अंतर के विपरीत होता है, जैसा कि अन्य उत्तरों में सुझाया गया है)। चौड़ाई अनुपात में होती है - 1 4.

से संकरा है लेकिन एक फ़ॉन्ट भी सारणीबद्ध आंकड़े, जहां प्रत्येक अंकों समान चौड़ाई के है की पेशकश कर सकते हैं:

आप इस सक्षम कर सकते हैं font-feature-settings: 'tnum'; के साथ सीएसएस। या अन्य ओपनटाइप सुविधाओं का उपयोग करने और ब्राउज़र असंगतताओं का ख्याल रखने के लिए, Utility OpenType देखें।