फ़ॉन्ट-ऑप्टिकल-आकार - सीएसएस-ट्रिक्स

font-optical-sizingसीएसएस संपत्ति उन्हें विभिन्न आकारों में पठनीय बनाने के लिए फ़ॉन्ट ग्लिफ़ की रूपरेखा समायोजित करने के लिए ब्राउज़र की अनुमति देता है। उदाहरण के लिए, छोटे पाठ को इसके विपरीत को बढ़ाने के लिए एक मोटी रूपरेखा मिल सकती है। दूसरी तरफ, बड़े टेक्स्ट को ऐसा कुछ मिल सकता है जो विनिर्देशन को उद्धृत करने के लिए अधिक "नाजुक" हो।

.element ( font-optical-sizing: none; )

ग्लिफ़ की रूपरेखा है?

वे करते हैं! वास्तव में, सभी ग्लिफ़ उनके पास हैं और वे फ़ॉन्ट के आकार के साथ पैमाने पर हैं। समस्या यह है कि एक छोटे से फ़ॉन्ट आकार में एक सुपर पतली रूपरेखा सबसे अच्छी विरासत के लिए पर्याप्त विपरीत प्रदान नहीं कर सकती है; इसी तरह, बड़े आकार में मोटा होना बहुत अधिक वजन और विपरीत हो सकता है। font-optical-sizingसही करने की कोशिश करता है कि ब्राउज़र को रूपरेखा के साथ फिडेल करने की अनुमति देता है ताकि यह विभिन्न पैमानों पर बेहतर ढंग से पढ़े। परिणाम कुरकुरा पाठ और या तो संकीर्ण या व्यापक पाठ लंबाई फ़ॉन्ट आकार के आधार पर होगा।

यह केवल फोंट पर काम करता है जो ऑप्टिकल आकार का समर्थन करता है

और ऑप्टिकल साइजिंग का समर्थन करने वाले फोंट वेरिएबल फोंट हैं , जिनमें रोबोटो डेल्टा भी शामिल है, जो Google के क्लासिक रोबोटो का एक चर संस्करण है। एक और सहायक फ़ॉन्ट अम्स्टेलवर है। दोनों फोंट का रखरखाव टाइप नेटवर्क द्वारा किया जाता है।

भले ही कोई फ़ॉन्ट परिवर्तनशील हो, यह स्पष्ट रूप से एक विशेषता के रूप में ऑप्टिकल आकार का समर्थन करना चाहिए।

वैकल्पिक रूप से फोंट आकार का एक और तरीका है

font-optical-sizingसंपत्ति ऑप्टिकली आकार करने के लिए एक फ़ॉन्ट कि समर्थन करता है यह सबसे कारगर तरीका है। एक अन्य तरीका font-variation-settingsसंपत्ति का उपयोग करना है, जो आपको ऑप्टिकल आकार को नियंत्रित करने की अनुमति देता है opsz, जो कि चर फ़ॉन्ट पर ऑप्टिकल आकार देने के लिए कीवर्ड है जो इसका समर्थन करता है।

ध्यान दें कि उपयोग करने के font-variation-settingsलिए आपको opszफ़ॉन्ट आकार के अनुसार सेट करने की आवश्यकता होती है ताकि सब कुछ ठीक से हो।

.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )

वाक्य - विन्यास

font-optical-sizing: auto | none;

• प्रारंभिक: auto
• पर लागू होता है: सभी तत्व
• इन्हेरिटेड: हाँ
• कंप्यूटेड वैल्यू: निर्दिष्ट कीवर्ड
• एनिमेशन प्रकार: असतत

मूल्यों

• auto: यह डिफ़ॉल्ट मान है। यह ब्राउज़र को पठनीयता के लिए विभिन्न फ़ॉन्ट आकारों में पाठ को अनुकूलित करने की अनुमति देता है।
• none: यह ब्राउज़रों को पाठ को संशोधित करने से रोकता है।

यह संपत्ति वैश्विक कीवर्ड मूल्यों को भी स्वीकार करती है, जिसमें शामिल हैं inherit, initialऔर unset।

डेमो

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

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	17+	62+	79+	11+	66+

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ऑपेरा मिनी
85+	79+	81+	11+	सब

अग्रिम पठन

• सीएसएस फ़ॉन्ट्स मॉड्यूल स्तर 4 (संपादक का मसौदा)
• MDN प्रलेखन
• परिवर्तनीय फोंट: ऑप्टिकल आकार, कस्टम कुल्हाड़ियों, और अन्य जिज्ञासा (उत्तरदायी वेब टाइपोग्राफी)