पत्र-रिक्ति - सीएसएस-ट्रिक्स

Anonim

letter-spacingसंपत्ति एक दिया तत्व या पाठ के ब्लॉक में प्रत्येक अक्षर के बीच स्थान की मात्रा नियंत्रित करता है। letter-spacingफ़ॉन्ट-सापेक्ष मानों (ईएम, रेम), माता-पिता-सापेक्ष मूल्यों (प्रतिशत), पूर्ण मूल्यों (px) और normalसंपत्ति को शामिल करने के लिए समर्थित मान , जो फ़ॉन्ट के डिफ़ॉल्ट पर स्थित है।

फ़ॉन्ट-सापेक्ष मानों का उपयोग करने की सिफारिश की जाती है, ताकि letter-spacingफ़ॉन्ट-आकार में परिवर्तन होने पर, या तो डिज़ाइन द्वारा या उपयोगकर्ता व्यवहार द्वारा उचित रूप से वृद्धि या घट जाए।

p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )

उपयोग करते समय ध्यान देने योग्य सबसे महत्वपूर्ण बिंदु यह letter-spacingहै कि निर्दिष्ट मान डिफ़ॉल्ट को परिवर्तित नहीं करता है, यह ब्राउज़र पर लागू होने वाले डिफ़ॉल्ट रिक्ति (फ़ॉन्ट मीट्रिक के आधार पर) में जोड़ा जाता है। letter-spacingनकारात्मक मानों का भी समर्थन करता है, जो पाठ की उपस्थिति को ढीला करने के बजाय, कस देगा।

इस पेन को देखें!

ब्याज के अंक

  • सबपिक्सल मूल्य: अधिकांश ब्राउज़रों में, एक मूल्य निर्दिष्ट करने से कम की तुलना 1pxमें letter-spacingजो लागू नहीं होता है। वर्तमान में फ़ायरफ़ॉक्स 14+ और IE 10 सबपिक्सल लेआउट का समर्थन करता है; ओपेरा और वेबकीट नहीं। पैच उतरा है, इसलिए WebKit अब उप-अक्षर-रिक्ति का समर्थन करता है।
  • letter-spacingसंपत्ति सीएसएस संक्रमण के साथ animatable है।
  • इनलाइन ब्लॉक तत्वों के बीच अंतरिक्ष के खिलाफ लड़ने के तरीकों में से एक letter-spacing: -4px;इनलाइन-ब्लॉक तत्वों के मूल कंटेनर पर सेट है । फिर आपको letter-spacing: normal;बाल तत्वों को रीसेट करना होगा ।
  • यह कभी-कभार ही होता है अगर कभी स्पेस लोअर केस लेटर्स को अच्छा आइडिया दिया जाए।

ब्राउज़र का समर्थन

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
काम करता है काम करता है काम करता है अधिकांश काम करता है काम करता है काम करता है

मोबाइल ब्राउज़र समर्थन पर एक नोट: ओपेरा मोबाइल के कुछ संस्करण, गैर-मानक WebKit कार्यान्वयन, और NetFront ब्राउज़र समर्थन नहीं करते हैं letter-spacing। ऊपर दिए गए QuirksMode लिंक में विवरण विस्तृत हैं।