Font-variant-संख्यात्मक - सीएसएस-ट्रिक्स

font-variant-numericसीएसएस में संपत्ति जो संख्यात्मक ग्लिफ़ एक वर्ग पर उपयोग करने के लिए, भिन्न, क्रमसूचक मार्करों और अन्य लोगों के अलावा स्टाइल विविधताओं के लिए विविधताओं सहित निर्दिष्ट द्वारा ओपन टाइप फॉन्ट प्रारूप का समर्थन करता है।

थोड़ा सा प्रसंग

हम एक स्थिर ग्लिफ़ के रूप में संख्याओं के बारे में सोचते हैं। यह प्रिंट करता है और यही तरीका है। हालाँकि, संख्याएँ बहुत अधिक हैं वर्णमाला पत्र इस अर्थ में कि उनके पास ऐसे रूप हो सकते हैं जो संदर्भ के आधार पर, इसे शैली को संशोधित करने के लायक बनाते हैं। हम फ्रैक्चर (जैसे 1/4), ऑर्डिनल्स (उदाहरण 1) और यहां तक ​​कि अपरकेस और लोअरकेस अंकों के बराबर जैसी चीजों के बारे में बात कर रहे हैं। हालांकि, अक्षरों के विपरीत, ये विविधताएं सामग्री के अर्थ को नहीं बदलती हैं, हालांकि वे अतिरिक्त संदर्भ उधार देते हैं या सुगमता पर प्रभाव डालते हैं।

इस संपत्ति के साथ रगड़ यह है कि यह ओपन टाइप-सक्षम फोंट के साथ काम करने के लिए डिज़ाइन किया गया था, एक नया लेकिन जल्दी से विकसित फ़ॉन्ट प्रारूप जो ग्लिफ़ का अधिक व्यापक सेट प्रदान करता है जिसे विभिन्न संदर्भों में उपयोग करने के लिए लक्षित किया जा सकता है। आप अक्सर सुन सकते हैं OpenType को वेरिएबल फोंट के रूप में संदर्भित किया जाता है और ऐसा इसलिए है क्योंकि उनमें कई प्रकार के वर्ण होते हैं जो उन्हें विभिन्न प्रकार के उपयोगों के लिए अधिक लचीला बनाते हैं। सभी चीजों के लिए विविधताएं!

मुद्दा यह है कि ऐसे फोंट की उपलब्धता जो इसका पूरा लाभ उठाने में सक्षम हैं font-variantऔर font-variant-numericसीमित हैं। OpenType- संगत फ़ॉन्‍ट की बढ़ती संख्‍या है, लेकिन इसमें बहुत कम विकल्‍प हैं जो font-variant-numericउन सभी सुविधाओं का उपयोग करते हैं जो प्रस्‍तुत करती हैं और जो अक्‍सर प्रीमियम और महंगी होती हैं। रिचर्ड बटलर ने इसे अच्छी तरह गाया है:

हमारे पास हमारे निपटान में 'अपरकेस' संख्याएँ हैं जिन्हें अस्तर या शीर्षक संख्या कहा जाता है, और 'लोअरकेस' अंक पुराने शैली या पाठ अंक कहलाते हैं। ... यह भी बात है कि अधिकांश विशाल फोंट न तो आधुनिक हैं और न ही पेशेवर हैं, अगर आधुनिक रूप में ओपन टाइप है- सक्षम और पेशेवर का मतलब अंकों के दोनों सेटों के साथ बनाया गया है।

सीएसएस के गुणों की बात आते ही हम सबसे बड़ी समस्या होती है, ब्राउज़र सपोर्ट की, लेकिन यह प्रॉपर्टी और इससे जुड़े अन्य font-variantलोग भी फॉन्ट डिजाइनरों की दया पर होते हैं ताकि टेबल पर पूरा सपोर्ट लाया जा सके।

यह एक अजीब बात है, लेकिन हम इस लेखन के समय भी अधिक "आधुनिक" और "पेशेवर" फोंट देखना शुरू कर रहे हैं। Adobe TypeKit ने घोषणा की कि यह OpenType फीचर्स को सपोर्ट करने के लिए काम कर रहा है और यह अफवाह है कि Google फोंट बोर्ड पर है और साथ ही अब क्रोम 62 उनका समर्थन करता है।

मूल उपयोग

यह संपत्ति का सबसे बुनियादी उपयोग है:

.fraction ( font-variant-numeric: diagonal-fractions; )

पुराने ब्राउज़र उसे पहचान नहीं पाएंगे, लेकिन वे स्वीकार करते हैं font-feature-settingsजो अलग-अलग मूल्यों के साथ समान विशेषताओं को अनलॉक करते हैं। हम गहरे समर्थन के लिए दो गुणों को जोड़ सकते हैं:

.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )

या, हम ब्राउज़र समर्थन को सूँघने के लिए इसे दर्जी कर सकते हैं @supportsताकि नई संपत्ति केवल सहायक ब्राउज़रों को दी जाए:

.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )

मूल्यों

font-variant-numericसंपत्ति निम्न मान स्वीकार करता है। संबंधित font-feature-settingsमूल्य संदर्भ के लिए विख्यात है।

सामान्य मान

मूल्य	विवरण	सुविधा सेटिंग
normal	नीचे सूचीबद्ध कोई भी सुविधा सक्षम नहीं है।	एन / ए
ordinal	संख्यात्मक आदेश का प्रतिनिधित्व करने के लिए पत्र लागू करता है, आमतौर पर एक सुपरस्क्रिप्ट के रूप में।	ordn
slashed-zero	एक विकर्ण रेखा के साथ शून्य का एक वैकल्पिक रूप प्रदर्शित करता है जो इसके माध्यम से चलता है।	zero

संख्यात्मक चित्रा मान

मूल्य	विवरण	सुविधा सेटिंग
lining-nums	रेखाएँ खड़ी रेखाओं के साथ होती हैं इसलिए वे एक ही ऊँचाई पर एक ही तल पर संरेखित होती हैं।	lnum
oldstyle-nums	एक वैकल्पिक ऊर्ध्वाधर संरेखण की अनुमति देता है जहां संख्याओं को समान बेसलाइन पर समान रूप से प्रदर्शित नहीं किया जाता है।	onum

सांख्यिक अंश मान

मूल्य	विवरण	सुविधा सेटिंग
diagonal-fractions	एक छोटे प्रारूप में अंशों को प्रदर्शित करता है जहां अंश (शीर्ष संख्या) और भाजक (निचला नंबर) एक विकर्ण स्लैश द्वारा विभाजित होते हैं।	frac
stacked-fractions	एक छोटे प्रारूप में अंशों को प्रदर्शित करता है जहां अंश और हर एक को एक के ऊपर एक और एक क्षैतिज रेखा से विभाजित किया जाता है।	afrc

संख्यात्मक अंतर मान

मूल्य	विवरण	सुविधा सेटिंग
proportional-nums	संख्याओं को अपनी खुद की जगह लेने देता है जो जरूरी नहीं कि अन्य अंकों की चौड़ाई के बराबर हो।	pnum
tabular-nums	सारणीबद्ध डेटा संदर्भों में स्वच्छ स्वरूपण के लिए समान आकार, आनुपातिक और रिक्ति के साथ संख्याएं प्रदर्शित करता है।	tnum

कल्पना में एक विशेष नोट शामिल है, ordinalक्योंकि यह सुपरस्क्रिप्ट supतत्व जैसा दिखता है, लेकिन अलग तरह से चिह्नित होता है।

सुपरस्क्रिप्ट के लिए:

sup ( font-variant-position: super; )

Two squared is 22

सामान्य मार्करों के लिए:

.ordinal ( font-variant-numeric: ordinal; )

1st

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

font-variant-numericसंपत्ति वर्तमान में सीएसएस फ़ॉन्ट्स मॉड्यूल स्तर 3 विनिर्देश, जो इस लेखन, जो साधन यह किसी भी क्षण में बदल सकते हैं के समय उम्मीदवार सिफ़ारिश स्थिति में है का हिस्सा है।

डेस्कटॉप

क्रोम	एज	फ़ायर्फ़ॉक्स	अर्थात	ओपेरा	सफारी
५२	नहीं न	34	नहीं न	३ ९	9.1

फ़ायरफ़ॉक्स 24-34 (अनन्य) layout.css.font-features.enabledसेट होने पर वरीयता के पीछे संपत्ति का समर्थन करता है true।

मोबाइल

Android ब्राउज़र	क्रोम Android	एज	फ़ायर्फ़ॉक्स	अर्थात	ओपेरा Android	iOS सफारी
५२	५२	नहीं न	34	नहीं न	३ ९	हाँ