CSS फ़ॉन्ट स्टैक जनरेटर — CJK फ़ॉलबैक के साथ सिस्टम फ़ॉन्ट स्टैक

यह टूल क्या करता है

CSS फ़ॉन्ट स्टैक जनरेटर उन फ़ॉन्ट्स से सीधे पेस्ट करने लायक font-family वैल्यू बनाता है जो आपके विज़िटर्स के डिवाइस पर पहले से इंस्टॉल हैं। कोई स्टाइल चुनें, जैसे नेटिव सिस्टम UI फ़ॉन्ट, Inter और Helvetica जैसा neo-grotesque, Charter जैसा transitional serif, या कोड के लिए उपयुक्त मोनोस्पेस, और टूल हर प्लेटफ़ॉर्म का सबसे अच्छा फ़ॉन्ट सही क्रम में लिख देता है।

ये स्टैक जाने-माने Modern Font Stacks कलेक्शन पर आधारित हैं, साथ में क्लासिक -apple-system, BlinkMacSystemFont, "Segoe UI" स्टैक भी है जिसे कई साइटें अब भी इस्तेमाल करती हैं। आप सरलीकृत चीनी, पारंपरिक चीनी, जापानी, कोरियन, अरबी, थाई या हिंदी टेक्स्ट के लिए फ़ॉलबैक जोड़ सकते हैं, और आख़िर में रंगीन इमोजी फ़ॉन्ट भी।

इसे कैसे इस्तेमाल करें

फ़ॉन्ट स्टैक चुनें। बाईं ओर का प्रीव्यू दिखाता है कि यह उस डिवाइस पर कैसा दिखता है जिसे आप अभी इस्तेमाल कर रहे हैं; अपने शब्द आज़माने के लिए आप इसका टेक्स्ट बदल सकते हैं।
अगर आपके पेजों में चीनी, जापानी, कोरियन, अरबी, थाई या हिंदी टेक्स्ट है तो दूसरी लिपियों के फ़ॉन्ट चुनें।
इमोजी फ़ॉन्ट जोड़ें को चालू या बंद करें।
आउटपुट चुनें: एक सादा font-family डिक्लेरेशन, CSS कस्टम प्रॉपर्टी, Tailwind fontFamily एंट्री, या सादी लिस्ट।
परिणाम कॉपी करें या .css फ़ाइल के रूप में डाउनलोड करें।

जिन नामों में स्पेस हैं या जो अंक से शुरू होते हैं, उन्हें अपने-आप कोट्स में रखा जाता है; system-ui और sans-serif जैसे CSS कीवर्ड कभी कोट्स में नहीं रखे जाते, क्योंकि ऐसा करने से वे ऐसे फ़ॉन्ट नाम बन जाएँगे जो मौजूद ही नहीं हैं।

उदाहरण

सरलीकृत चीनी फ़ॉलबैक के साथ सिस्टम UI:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

सुझाव

बॉडी टेक्स्ट के लिए एक स्टैक और कोड के लिए मोनोस्पेस स्टैक इस्तेमाल करें: दो सिस्टम स्टैक लोड करने में कोई ख़र्च नहीं होता।
प्रीव्यू आपके अपने डिवाइस पर इंस्टॉल फ़ॉन्ट्स पर निर्भर करता है, इसलिए पेज को Windows और फ़ोन पर भी जाँचें।
अगर बाद में आप कोई वेब फ़ॉन्ट जोड़ते हैं, तो उसे लिस्ट में सबसे पहले रखें और सिस्टम स्टैक को फ़ॉलबैक के रूप में रखें।

अक्सर पूछे जाने वाले सवाल

› फ़ॉन्ट स्टैक क्या होता है?

CSS font-family प्रॉपर्टी में फ़ॉन्ट फ़ैमिली की एक लिस्ट। ब्राउज़र वह पहला फ़ॉन्ट इस्तेमाल करता है जो डिवाइस पर इंस्टॉल हो, और न मिलने पर अगले पर जाता है, आख़िर में sans-serif जैसी कोई generic फ़ैमिली होती है।

› चीनी, जापानी या कोरियन फ़ॉन्ट क्यों जोड़ें?

Inter या Charter जैसे वेस्टर्न फ़ॉन्ट में CJK ग्लिफ़ नहीं होते। Generic फ़ैमिली से पहले PingFang SC, Microsoft YaHei या Noto Sans SC लिखने से चीनी टेक्स्ट ऐसा फ़ॉन्ट इस्तेमाल करता है जो स्टाइल से मेल खाता है, न कि जो भी सिस्टम चुन ले। अरबी, थाई और हिंदी (देवनागरी) के लिए भी यही बात लागू होती है। रूसी, यूक्रेनी, ग्रीक, वियतनामी, तुर्की, पोलिश और लैटिन या सिरिलिक लिपि वाली दूसरी भाषाओं के लिए कुछ अतिरिक्त नहीं चाहिए: हर स्टैक में मौजूद सिस्टम और Noto फ़ॉन्ट इन्हें पहले से कवर करते हैं।

› इमोजी फ़ॉन्ट sans-serif के बाद क्यों लिखे जाते हैं?

इमोजी फ़ॉन्ट सिर्फ़ इमोजी कवर करते हैं। इन्हें आख़िर में रखने से यह पक्का होता है कि साधारण अक्षर और अंक कभी इमोजी फ़ॉन्ट में रेंडर न हों, जबकि इमोजी को हर प्लेटफ़ॉर्म पर रंगीन ग्लिफ़ मिलते रहें।

› क्या इन स्टैक्स के लिए वेब फ़ॉन्ट डाउनलोड करने पड़ते हैं?

नहीं। हर स्टैक ऐसे फ़ॉन्ट इस्तेमाल करता है जो Windows, macOS, iOS, Android या आम Linux डिस्ट्रीब्यूशन के साथ आते हैं, इसलिए पेज बिना किसी फ़ॉन्ट रिक्वेस्ट के लोड होते हैं।