सिस्टम फॉन्ट स्टैक - सीएसएस-ट्रिक्स

किसी विशेष ऑपरेटिंग सिस्टम के सिस्टम फॉन्ट को डिफॉल्ट करने से परफॉर्मेंस को बूस्ट किया जा सकता है क्योंकि ब्राउजर को किसी भी फॉन्ट फाइल को डाउनलोड नहीं करना पड़ता, यह पहले से मौजूद एक का उपयोग कर रहा है। यह किसी भी "वेब सुरक्षित" फ़ॉन्ट का सच है, यद्यपि। "सिस्टम" फोंट की सुंदरता यह है कि यह वर्तमान ओएस के उपयोग से मेल खाती है, इसलिए यह एक आरामदायक रूप हो सकता है।

वे सिस्टम फोंट क्या हैं? इस लेखन के समय, यह निम्नानुसार टूट जाता है:

ओएस	संस्करण	सिस्टम फ़ॉन्ट
Mac OS X	एल कैपिटन	सैन फ्रांसिस्को
Mac OS X	Yosemite	हेल्वेटिका नीयू
Mac OS X	मावेरिक्स	ल्युसिडा ग्रांडे
खिड़कियाँ	विस्टा	सेगो यूआई
खिड़कियाँ	एक्सपी	तहोमा
खिड़कियाँ	3.1 से ME	Microsoft Sans Serif
एंड्रॉयड	आइसक्रीम सैंडविच (4.0) +	रोबोटो
एंड्रॉयड	कपकेक (1.5) हनीकॉम्ब (3.2.6) के लिए	Droid Sans
उबंटू	सभी संस्करण	उबंटू

स्निपेट में जाओ, पहले से ही!

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

विधि 1: तत्व स्तर पर सिस्टम फ़ॉन्ट

क्रोम और सफारी ने हाल ही में "सिस्टम-यूआई" को भेज दिया है, जो एक सामान्य फ़ॉन्ट परिवार है जिसका उपयोग "-पल-सिस्टम" और "ब्लिंकमैकसिस्टम फ़ॉन्ट" के बाद के उदाहरणों में किया जा सकता है। जानकारी के लिए JJ को हैट टिप।

सिस्टम फोंट लगाने के लिए एक विधि सीधे font-familyसंपत्ति का उपयोग करके उन्हें एक तत्व पर कॉल करके है ।

GitHub अपनी साइट पर इस विधि का उपयोग करता है, bodyतत्व पर सिस्टम फोंट लागू करता है:

/* System Fonts as used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )

मध्यम और वर्डप्रेस व्यवस्थापक दोनों एक समान दृष्टिकोण का उपयोग करते हैं, थोड़े बदलाव के साथ, ऑक्सीजन सैंस (GNU + लिनक्स ऑपरेटिंग सिस्टम के लिए बनाई गई) और Cantarell (GNOME ऑपरेटिंग सिस्टम के लिए निर्मित) के लिए विशेष रूप से समर्थन करते हैं। यह स्निपेट कुछ प्रकार के इमोजी और प्रतीकों के लिए समर्थन भी छोड़ देता है:

/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )

नोट: इस विधि का उपयोग केवल शॉर्टहैंड के font-familyबजाय संपत्ति पर किया जाना चाहिए font। Booking.com ने चेतावनी पर एक पूरी तरह से प्रकाशित किया, जो कि प्रमुख फ़ॉन्ट के कारण एक विक्रेता उपसर्ग के कारण उत्पन्न होता है।

विधि 2: सिस्टम फ़ॉन्ट स्टैक

पहली विधि की सीमा यह है कि आपको प्रत्येक बार किसी तत्व पर उपयोग किए जाने वाले फोंट के पूर्ण स्टैक को कॉल करना होगा और यह बोझिल हो सकता है और आपके कोड को ब्लोट कर सकता है, जहां यह निर्भर करता है कि यह कहां और कैसे उपयोग किया गया है।

जोनाथन नील एक वैकल्पिक विधि प्रदान करता है जहां सिस्टम फोंट का उपयोग करके घोषित किया जाता है @font-face।

यहां लाभ यह है कि आप एक बार फोंट की घोषणा कर सकते हैं और फिर वह बात बन जाती है जो आप font-familyहर बार फोंट की लंबी सूची के बजाय संपत्ति पर कर सकते हैं।

/* Define the "system" font family */ @font-face ( font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )

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

सम्बंधित

• सीएसएस में ओएस विशिष्ट फ़ॉन्ट्स - जिसमें उपयोग में फ़ॉन्ट का परीक्षण करने के लिए एक जावास्क्रिप्ट विधि शामिल है।
• सिस्टम फ़ॉन्ट्स SVG में
• Booking.com पर सिस्टम फोंट को लागू करना - एक सबक सीखा गया - Booking.com साझा करता है कि उन्होंने fontशॉर्टहैंड पर सिस्टम फ़ॉन्ट स्टैक का उपयोग करके कैसे सीखा कि यह अपेक्षा के अनुरूप काम नहीं करता है।