unicode-rangeसीएसएस में संपत्ति के द्वारा प्रयोग किया जाता है @font-faceकि फ़ॉन्ट फ़ेस द्वारा समर्थित हैं पात्रों को परिभाषित करने के।
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+00-FF; /* Define the available characters */ )दूसरे शब्दों में, @font-faceसंपत्ति को संदर्भित करेगा और यह निर्धारित करेगा कि उसे HTML दस्तावेज़ में वर्णों या श्रेणी के वर्णों को डाउनलोड या उपयोग करना चाहिए या नहीं।
फ़ॉन्ट अंकित करें: अरे HTML, निम्न में से कोई भी अक्षर पृष्ठ पर क्या है?
HTML: हाँ, उनमें से एक गुच्छा है।
फ़ॉन्ट-चेहरा: बढ़िया, यहाँ एक फ़ॉन्ट फ़ाइल है जिसे आपको उन पात्रों को प्रदर्शित करने के लिए डाउनलोड करना चाहिए।
हमें यहाँ जो महत्वपूर्ण शब्दार्थ भेद बताना चाहिए वह यह unicode-rangeनिर्धारित करता है कि एक फ़ॉन्ट का उपयोग करने के लिए कौन से वर्ण उपलब्ध हैं, बजाय इसके कि किन वर्णों का उपयोग किया जा सकता है। दूसरे शब्दों में, यदि हम उस श्रेणी के HTML डॉक्यूमेंट में लोड किए गए unicode-rangeऑन @font-faceऔर कैरेक्टर की घोषणा करते हैं , तो फॉन्ट डाउनलोड हो जाएगा और उपयोग में लाया जाएगा।
आप इस संपत्ति के साथ खुलने वाले प्रदर्शन लाभों की कल्पना कर सकते हैं। उदाहरण के लिए, हम किसी कस्टम फ़ॉन्ट को तभी लोड कर सकते हैं जब वह सभी स्थितियों में हमेशा फ़ॉन्ट लोड करने के बजाय विशिष्ट वर्णों को समायोजित करता है।
यहां तक कि एक @font-faceही font-faceसंपत्ति घोषणा पर दो सेटों को संयोजित करने का एक तरीका है , जेक आर्चीबाल्ड द्वारा साझा किए गए एक आसान ट्रिक के लिए धन्यवाद। विचार यह है कि एक @font-faceसेट मिलान के आधार पर दूसरे को ओवरराइड करता है unicode-range, प्रदर्शन को अनुकूलित करता है, या केवल एक पृष्ठ पर टाइपोग्राफी बढ़ाता है।
मूल्यों
कोई भी यूनिकोड वर्ण कोड या रेंज स्वीकार्य unicode-rangeमूल्य है। आप देखेंगे कि यूनिकोड बिंदु से पहले U+छह वर्णों का अनुसरण किया जाता है जो वर्ण कोड बनाते हैं। इस प्रारूप का पालन न करने वाले बिंदु या श्रेणियां अमान्य मानी जाती हैं और इससे संपत्ति की अनदेखी होगी।
- एकल चरित्र (जैसे
U+26) - चरित्र रेंज (जैसे
U+0025-00FF) - वाइल्डकार्ड रेंज (जैसे
U+4??)
वाइल्डकार्ड रेंज एक गुच्छा में से एक है। प्रत्येक ?एक वाइल्डकार्ड का प्रतिनिधित्व करता है जहां किसी भी मूल्य का मिलान होगा। आपको लगता है कि आप इस तरह से कुछ के साथ पूरी बात को वाइल्डकार्ड कर सकते हैं:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )हालांकि, यह काम नहीं करेगा। इसका कारण यह है कि ?एक चरित्र कोड का मतलब होता है 0, जिसके साथ लीड होता है , जिसका अर्थ है कि पांच प्रश्न चिह्न वर्ण तक का उपयोग यूनिकोड के छह कुल वर्णों को स्वीकार करने के बावजूद किया जा सकता है।
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )वहाँ यूनिकोड विकल्पों में से एक टन हैं। बेसिक लैटिन ( 0020-007F) अंग्रेजी साइटों के लिए शायद सबसे आम रेंज है, लेकिन यूनिकोड- सब्जेक्ट.कॉम विशिष्ट पात्रों के लिए कोड के साथ सभी उपलब्ध रेंजों की एक व्यापक सूची प्रदान करता है।
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| ३६ | ४४ | 1 1 | १। | १० |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 81 | 10.0-10.2 |
अग्रिम पठन
- सीएसएस फ़ॉन्ट्स मॉड्यूल स्तर 3 विशिष्टता
- यूनिकोड तालिका: यूनिकोड चरित्र सेट और कोड को संदर्भित करने के लिए एक संसाधन।
- @ फॉन्ट-फेस का उपयोग करना: सीएसएस-ट्रिक्स पोस्ट कवर
@font-faceकरती है कि विभिन्न तकनीकों और काम करने के उदाहरणों के साथ कैसे काम करता है। - @ फ़ॉन्ट-फेस पर फ़ॉन्ट प्रॉपर्टी घोषित करने के साथ सौदा क्या है? सीएसएस-ट्रिक्स पोस्ट जो कि जहां तक फ़ॉन्ट गुणों में मिलान किए गए मानों का उपयोग किया जाता है, यह निर्धारित करने के लिए उपयोग किया जा सकता है कि क्या कस्टम फ़ॉन्ट डाउनलोड किया गया है और ब्राउज़र द्वारा उपयोग किया जाता है।