फ़ॉन्ट-आकार-समायोजन - सीएसएस-ट्रिक्स

Anonim

यह संपत्ति डेवलपर्स को font-sizeकिसी तत्व को उसके निचले अक्षरों के आकार के आधार पर, अपरकेस अक्षरों के बजाय सेट करने की क्षमता देती है ।

.element ( font-size: 22px; font-size-adjust: .5; )

इस स्थिति में फ़ॉन्ट का निचला अक्षर 11 x ऊंचाई होगा, 22 x .5 = 11 के बाद से।

जब फोंट लोड करना हो तो फ़ॉलबैक फॉन्ट के निचले अक्षरों और नए लोड किए गए टाइपफेस के बीच एक अलग पहलू अनुपात होने की संभावना है, इसलिए font-size-adjustजब हम एक नया घोषित करते font-familyहैं और फ्लैश ऑफ अनस्टीड टेक्स्ट (फ़्यूज़) देखते हैं तो रिफ्लो की मात्रा को नियंत्रित करना उपयोगी होता है ।

नीचे दिए गए डेमो में, इस संपत्ति को चालू और बंद करना संभव है यह दिखाने के लिए कि कैसे चापराल की तरह एक वेब फ़ॉन्ट x-height और Times में वर्णों के संरेखण, फ़ॉलबैक फ़ॉन्ट से भिन्न होता है। लेकिन सावधान रहें, यह संपत्ति फिलहाल बहुत कम ब्राउज़र द्वारा समर्थित है।

शरीर के पाठ के बड़े हिस्से पर सेट होने पर यह नाटकीय प्रभाव डाल सकता है, और फ़ॉलबैक और नए लोड किए गए फ़ॉन्ट के बीच स्विच करते समय होने वाली झिलमिलाहट में काफी सुधार कर सकता है:

अधिक जानकारी

  • एमडीएन
  • डब्ल्यू 3 सी

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
नहीं न नहीं न नहीं न नहीं न

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
नहीं न नहीं न नहीं न नहीं न