फ़ॉन्टलेन्स

किसी भी टेक्स्ट को चुनें, राइट-क्लिक करके उसका फ़ॉन्ट, आकार, वज़न, रंग और CSS तुरंत देखें। कॉपी करें, बदलाव करें, प्रीव्यू देखें और…

कभी किसी पेज पर गए हैं, अक्षरों की बनावट की प्रशंसा की है, और सोचा है "यह कौन सा फ़ॉन्ट है?" फ़ॉन्टलेंस इस सवाल का जवाब एक ही क्लिक में देता है। किसी भी वेबसाइट पर किसी भी टेक्स्ट का चयन करें, राइट-क्लिक करें, और "फ़ॉन्टलेंस से फ़ॉन्ट का निरीक्षण करें" चुनें। एक साफ़, केंद्रित पैनल सीधे पेज के ऊपर खुलता है और ठीक-ठीक बताता है कि उस टेक्स्ट को कैसे स्टाइल किया गया है: टाइपफेस, उसका आकार, वज़न, लाइन की ऊँचाई, रंग, और डिज़ाइन के पीछे का हर दूसरा विवरण। चाहे आप एक डिज़ाइनर हों जो किसी लेआउट को रिवर्स-इंजीनियर कर रहे हों, एक डेवलपर जो किसी स्पेक से मिलान कर रहा हो, या बस एक सुंदर हेडलाइन के बारे में उत्सुक हों, यह टूल किसी भी वेब पेज को टाइपोग्राफी की एक खुली किताब में बदल देता है। फ़ॉन्टलेंस एक फ़ॉन्ट खोजक और CSS निरीक्षक का मिला-जुला रूप है। यह सिर्फ आपके लिए फ़ॉन्ट-फैमिली का नाम ही नहीं बताता, बल्कि यह आपको उपयोग के लिए तैयार कोड, विचारों का परीक्षण करने के लिए एक इंटरैक्टिव प्लेग्राउंड, और यह सुनिश्चित करने के लिए एक्सेसिबिलिटी टूल भी देता है कि आपका टेक्स्ट पठनीय है। कोई खाता नहीं। कोई साइनअप नहीं। बस चुनें, राइट-क्लिक करें, और जांचें। 🔍 आप क्या कर सकते हैं • किसी भी चयनित शब्द की पूरी टाइपोग्राफी को उजागर करें: फ़ॉन्ट-फैमिली, फ़ॉन्ट-आकार, फ़ॉन्ट-वज़न, लाइन-ऊँचाई, और रंग एक नज़र में देखें • अतिरिक्त स्टाइलिंग देखें जिसे नज़रअंदाज़ करना आसान है, जैसे लेटर-स्पेसिंग, टेक्स्ट-ट्रांसफ़ॉर्म, और फ़ॉन्ट-स्टाइल • किसी भी एक प्रॉपर्टी को एक क्लिक में कॉपी करें, या पूरे रूल सेट को एक पूर्ण CSS स्निपेट के रूप में प्राप्त करें • उस स्निपेट को सरल टैब के माध्यम से टेलविंड, SCSS, या SASS में बदलें, फिर पूरा या लाइन-दर-लाइन कॉपी करें • एक लाइव, संपादन योग्य पूर्वावलोकन में प्रयोग करें: नमूना शब्दों को फिर से लिखें, मानों को बदलें, पृष्ठभूमि बदलें, और इसे तुरंत अपडेट होते देखें • एक प्रदाता बैज के साथ पहचानें कि एक वेब फ़ॉन्ट कहाँ से आता है (गूगल फ़ॉन्ट्स, एडोब फ़ॉन्ट्स, सेल्फ़-होस्टेड, या एक अंतर्निहित सिस्टम टाइपफ़ेस) • 'फ़ॉन्ट डाउनलोड करें' बटन के साथ एक वेब फ़ॉन्ट को अपने कंप्यूटर पर सहेजें, जो सीधे उसके अपने स्रोत से लिया गया हो • WCAG मानकों के विरुद्ध रंग कंट्रास्ट की जाँच करें, सटीक अनुपात और AA और AAA पास या फेल परिणामों के साथ • एक पूर्ण पिकर के साथ रंगों को चुनें और नमूना लें, जिसमें स्क्रीन पर किसी भी पिक्सेल को पकड़ने के लिए एक आईड्रॉपर शामिल है • px, rem, pt, और em के बीच माप की इकाइयों को बदलें, जो फ़ील्ड और निर्यात किए गए कोड दोनों पर लागू होता है 🖱️ यह कैसे काम करता है फ़ॉन्टलेंस का उपयोग करने में कुछ ही सेकंड लगते हैं। जिन शब्दों का आप अध्ययन करना चाहते हैं, उन्हें हाइलाइट करें, चयन पर राइट-क्लिक करें, और मेनू से "फ़ॉन्टलेंस से फ़ॉन्ट का निरीक्षण करें" चुनें। पैनल वर्तमान पेज के ऊपर दिखाई देता है, जिसे करीने से स्टाइल किया गया है ताकि यह कभी भी साइट के अपने लुक से न टकराए। वहाँ से आप विवरण पढ़ सकते हैं, जो आपको चाहिए उसे कॉपी कर सकते हैं, या संपादन शुरू कर सकते हैं। लाइव पूर्वावलोकन वह जगह है जहाँ चीजें मजेदार हो जाती हैं। एक वास्तविक हेडलाइन का परीक्षण करने के लिए शब्दों को बदलें, आकार को थोड़ा बदलें, वज़न को समायोजित करें, या यह देखने के लिए एक नया पृष्ठभूमि रंग सेट करें कि टाइप कैसा दिखता है। आपके संपादन तब भी बने रहते हैं जब आप पेजों के बीच घूमते हैं और बाद में वापस आते हैं, इसलिए एक साइट पर शुरू किया गया आपका विचार अगली साइट पर आपका इंतजार कर रहा होता है। जब आप मूल मान वापस चाहते हैं, तो "साइट पर रीसेट करें" बटन हर उस चीज़ को पुनर्स्थापित कर देता है जिसका पेज वास्तव में उपयोग करता है। रॉ एसेट चाहिए? डाउनलोड करने योग्य वेब फ़ॉन्ट के लिए, एक बटन उसके @font-face स्थान से वास्तविक फ़ाइल प्राप्त करता है। एक ऐसे टाइपफेस के लिए जो पहले से ही आपके ऑपरेटिंग सिस्टम के साथ आता है, फ़ॉन्टलेंस आपको बताता है कि यह एक अंतर्निहित फ़ॉन्ट है, इसलिए आप जानते हैं कि यह बिना किसी डाउनलोड के उपलब्ध है। 🔒 गोपनीयता पहले फ़ॉन्टलेंस पूरी तरह से आपके ब्राउज़र के अंदर चलता है। टेक्स्ट का निरीक्षण करने में कोई डेटा संग्रह, कोई ट्रैकिंग, कोई एनालिटिक्स और कोई बाहरी सर्वर शामिल नहीं है। आप जो कुछ भी जांचते हैं वह आपकी मशीन पर रहता है। एक्सटेंशन ठीक एक नेटवर्क अनुरोध करता है, और केवल तभी जब आप जानबूझकर "फ़ॉन्ट डाउनलोड करें" दबाते हैं, जिस बिंदु पर यह फ़ाइल को पुनः प्राप्त करने के लिए उस फ़ॉन्ट के अपने स्रोत तक पहुँचता है। आपके डिवाइस से और कुछ भी बाहर नहीं जाता है। अनुमतियाँ जानबूझकर सीमित रखी गई हैं। संदर्भ-मेनू अनुमति राइट-क्लिक प्रविष्टि जोड़ती है। सक्रिय-टैब अनुमति टूल को उस टेक्स्ट को पढ़ने देती है जिसे आपने उस टैब पर चुना है जहां आप इसे लागू करते हैं, और कहीं नहीं। स्टोरेज आपके पूर्वावलोकन टेक्स्ट और आपकी यूनिट और प्रारूप प्राथमिकताओं को रखता है ताकि वे अगली बार याद रहें। आपकी ब्राउज़िंग हिस्ट्री तक कोई व्यापक पहुँच और कोई विस्तृत होस्ट अनुमतियाँ नहीं हैं। 👥 यह किसके लिए है • वेब डिज़ाइनर जो एक टाइपफेस की पहचान करना, एक पैलेट को कैप्चर करना, और शैलियों का जल्दी से पुन: उपयोग करना चाहते हैं • फ्रंट-एंड डेवलपर जो एक मॉकअप का मिलान कर रहे हैं या सटीक फ़ॉन्ट-फैमिली और स्पेसिंग मानों को कोड में ले जा रहे हैं • UI और UX इंजीनियर जो सुसंगत, ऑन-ब्रांड टाइप सिस्टम बना रहे हैं • CSS और टाइपोग्राफी सीखने वाले छात्र जो यह देखना चाहते हैं कि वास्तविक साइटें कैसे बनाई जाती हैं • एक्सेसिबिलिटी ऑडिटर जो शिपिंग से पहले यह सत्यापित कर रहे हैं कि टेक्स्ट WCAG कंट्रास्ट आवश्यकताओं को पूरा करता है • ब्लॉगर, मार्केटर, और जिज्ञासु पाठक जो बस यह जानना चाहते हैं कि कोई साइट कौन सा फ़ॉन्ट उपयोग कर रही है ✨ लोग इसे क्यों रखते हैं • डेवलपर टूल में खोजने के बजाय एक राइट-क्लिक आपको जवाब देता है • कोड सादे CSS, टेलविंड, SCSS, या SASS में कॉपी-करने-के-लिए-तैयार है, इसलिए यह सीधे आपके प्रोजेक्ट में जाता है • संपादन योग्य पूर्वावलोकन आपको कोड की एक भी पंक्ति को छुए बिना टाइप विकल्पों का प्रोटोटाइप बनाने देता है • कंट्रास्ट चेकर एक्सेसिबिलिटी को आपके वर्कफ़्लो में बनाता है बजाय इसके कि इसे बाद के लिए छोड़ दिया जाए • कलर पिकर और आईड्रॉपर का मतलब है कि आप पेज पर कहीं से भी सटीक रंगों का नमूना ले सकते हैं और उनका पुन: उपयोग कर सकते हैं • लाइट और डार्क थीम स्वचालित रूप से आपके ऑपरेटिंग सिस्टम का पालन करते हैं, इसलिए यह दिन हो या रात, सहज महसूस होता है • px, rem, pt, और em के बीच यूनिट स्विचिंग आउटपुट को आपके कोडबेस के लिखने के तरीके के साथ संरेखित रखता है 🎨 विवरणों पर एक नज़दीकी नज़र टाइपोग्राफी एक नाम से कहीं बढ़कर है। फ़ॉन्टलेंस उन छोटे निर्णयों को सामने लाता है जो टेक्स्ट को सही महसूस कराते हैं, एक हेडिंग के वज़न से लेकर लाइन-ऊँचाई में साँस लेने की जगह और लेटर-स्पेसिंग की सूक्ष्म ट्रैकिंग तक। इन मानों को एक साथ देखने से आपको यह समझने में मदद मिलती है कि कोई डिज़ाइन क्यों काम करता है और इसे कैसे फिर से बनाया जाए। प्रदाता बैज भी संदर्भ जोड़ता है, आपको एक नज़र में बताता है कि क्या आप गूगल फ़ॉन्ट्स एसेट, एडोब फ़ॉन्ट्स फेस, एक सेल्फ़-होस्टेड फ़ाइल, या एक सिस्टम डिफ़ॉल्ट देख रहे हैं, जो अक्सर पहला सुराग होता है जब आप किसी टाइपफेस का मिलान करने या स्रोत खोजने के लिए निकलते हैं। रंग उपकरण एक स्थिर रीडआउट से परे जाते हैं। पिकर ह्यू और अल्फा स्लाइडर्स के साथ एक HSV वर्ग प्रदान करता है, और यह HEX, RGB, और HSL में काम करता है ताकि आप उस प्रारूप में काम कर सकें जो आपको सूट करता है। इसे आईड्रॉपर के साथ मिलाएं और आप किसी भी तत्व की सटीक शेड को उठा सकते हैं और इसे अपने पूर्वावलोकन या अपने नोट्स में डाल सकते हैं। 🚀 निरीक्षण शुरू करें फ़ॉन्टलेंस जोड़ें, कुछ शब्दों को हाइलाइट करें, और किसी भी पेज के पीछे की टाइपोग्राफी, शैलियों और रंगों को उजागर करने के लिए राइट-क्लिक करें। यह उन सभी के लिए एक तेज़, निजी और वास्तव में उपयोगी साथी है जो इस बात की परवाह करते हैं कि वेब कैसे पढ़ा जाता है। इसे इंस्टॉल करें, इसे हाथ में रखें, और फिर कभी किसी रहस्यमयी फ़ॉन्ट के बारे में न सोचें।