फॉन्टलेन्स

Chrome साठी मोफत एक्सटेंशन

हा कोणता फॉन्ट आहे? राइट-क्लिक करा आणि CSS पाहा

कोणत्याही वेबसाइटवरील मजकूर निवडा, राइट-क्लिक करा आणि “Inspect font with FontLens” निवडा. पेजवर फॉन्ट इन्स्पेक्टर उघडेल; त्यात family, आकार, वजन, line-height, रंग, कॉपी करण्यासाठी तयार CSS आणि फॉन्ट डाउनलोड बटण दिसेल.

Chrome मध्ये जोडा — मोफत

Edge, Brave, Opera आणि इतर क्रोमियम ब्राउझरमध्येही चालते.

FontLens इन्स्पेक्टर: cap-height, x-height आणि baseline मार्गदर्शक रेषांमधील Ag नमुना, फॉन्ट गुणधर्म आणि Tailwind कोड

एका दृष्टिक्षेपात

हे काय करते
तुम्ही निवडलेल्या मजकुराचा फॉन्ट दाखवते: family, आकार, वजन, line-height, रंग आणि डीफॉल्टपेक्षा वेगळ्या इतर शैली; CSS कॉपीसाठी तयार असते.
सुरुवात कशी करावी
मजकूर निवडा, राइट-क्लिक करा आणि “Inspect font with FontLens” निवडा. मजकूर निवडलेला असतानाच हा मेनू पर्याय दिसतो.
कॉपीचे स्वरूप
CSS, SCSS, SASS किंवा Tailwind; आकार px, rem, pt किंवा em मध्ये.
फॉन्ट फाइल
“Download font” @font-face स्रोतावरून वेब फॉन्ट मिळवते. वापरण्यापूर्वी फॉन्टचा परवाना तपासा.
कोणासाठी
वेब डिझायनर, front-end डेव्हलपर, accessibility परीक्षक आणि CSS शिकणारे विद्यार्थी.
किंमत
मोफत. खाते नाही, सशुल्क आवृत्ती नाही.
डेटा
तुमच्या ब्राउझरमध्ये चालते. सर्व्हर नाहीत, analytics नाही. तुम्ही सुरू केलेले फॉन्ट डाउनलोड हीच एकमेव विनंती असते.
कुठे चालते
Chrome Web Store वरून इन्स्टॉल होणाऱ्या Chrome आणि इतर Chromium ब्राउझरमध्ये. Firefox किंवा Safari मध्ये नाही.
मर्यादा
वेबपेजवरील खऱ्या मजकुराचे CSS वाचते. चित्र, canvas किंवा PDF मधला मजकूर किंवा Chrome ची स्वतःची पेजेस वाचत नाही.
आवृत्ती
2.2.0, २३ ऑक्टोबर, २०२६ रोजी अद्यतनित

फॉन्टपर्यंत दोन क्लिक

  1. 1

    मजकूर निवडा

    कोणत्याही वेबपेजवरील शीर्षक, परिच्छेद किंवा बटणावरील मजकूर.

  2. 2

    राइट-क्लिक करा

    “Inspect font with FontLens” निवडा. पेजवर इन्स्पेक्टर उघडून family, आकार, वजन, line-height आणि रंग दाखवतो.

  3. 3

    कॉपी करा किंवा बदला

    CSS किंवा Tailwind कॉपी करा, लाइव्ह प्रिव्ह्यूमध्ये दुसरा आकार किंवा रंग वापरून पाहा, किंवा फॉन्ट फाइल डाउनलोड करा.

लोक ते का उघडतात

Aa

टाइपफेसचे नाव शोधा

आवडलेले शीर्षक दिसले? ते निवडून family, वजन आणि फॉन्टचा स्रोत पाहा: Google Fonts, Adobe Fonts किंवा ती साइट.

{ }

मॉकअपशी जुळवा

लाइव्ह पेजवरील मापांची डिझाइन फाइलशी तुलना करा, मग नियम CSS, SCSS, SASS किंवा Tailwind म्हणून कॉपी करा.

4.5:1

कॉन्ट्रास्ट तपासा

AA आणि AAA चिन्हांसह कॉन्ट्रास्ट गुणोत्तर पाहा. डिझाइन प्रसिद्ध करण्याआधी गडद मजकूर किंवा फिकट पार्श्वभूमी वापरून पाहा.

हे काय करते

  • मार्गदर्शक रेषांसह नमुना

    स्टॅकमधील पहिला family, फॉन्टमधून मोजलेल्या cap-height, x-height आणि baseline रेषांमध्ये दाखवते.

  • कोडचे स्वरूप

    CSS, SCSS, SASS आणि Tailwind. संपूर्ण कोड किंवा एक ओळ कॉपी करा; शेवटचे वापरलेले स्वरूप लक्षात राहते.

  • तुमची एकके

    फील्ड आणि कोडमध्ये px, rem, pt किंवा em मधील आकार पाहा. rem पेजच्या root आकारानुसार असते.

  • फॉन्टचा स्रोत

    फॉन्ट Google Fonts, Adobe Fonts, self-hosted की तुमच्या संगणकावरील system font आहे हे बॅज दाखवते.

  • कॉन्ट्रास्ट तपासणी

    मजकूर आणि पार्श्वभूमीमधील गुणोत्तर, सामान्य आणि मोठ्या मजकुरासाठी AA व AAA चिन्हांसह. रंग बदलल्यावर ते अपडेट होते.

  • फॉन्ट डाउनलोड

    @font-face स्रोतावरून family च्या नावाची फाइल मिळवा. सर्व्हरने अडवल्यास स्रोत नव्या टॅबमध्ये उघडतो.

DevTools मध्ये “हा कोणता फॉन्ट?” शोधायला एवढा वेळ का लागतो

पेज फॉन्टची यादी सांगते आणि ब्राउझरकडे असलेला पहिला फॉन्ट वापरतो. कोणता आहे हे शोधण्यासाठी DevTools उघडा, element शोधा, Computed पॅनल वाचा आणि Network पॅनलमध्ये फॉन्ट फाइल शोधा. आकार, वजन, line-height आणि रंग वेगवेगळ्या ठिकाणी असतात.

तुम्ही निवडलेल्या मजकुराची computed style FontLens वाचून एका पॅनलमध्ये ठेवते: family stack, पहिल्या family चा नमुना, मापे, फॉन्टचा स्रोत आणि CSS. ते पेजचे CSS वाचते, त्यामुळे चित्रातील फॉन्टचे नाव सांगू शकत नाही.

तुमच्या ब्राउझरबाहेर काहीही जात नाही

  • खाते नाही, सर्व्हर नाहीत

    FontLens तुमच्या ब्राउझरमध्ये चालते. Analytics किंवा tracking नाही.

  • तुम्ही निवडलेलेच वाचते

    इन्स्पेक्टर तुम्ही राइट-क्लिक केलेल्या मजकुराच्या शैली वाचतो. पेजची कोणतीही माहिती कुठेही पाठवली जात नाही.

  • चार परवानग्या

    राइट-क्लिक पर्यायासाठी context menu, इन्स्पेक्टर उघडण्यासाठी active tab आणि पेज प्रवेश, नमुना मजकूर, एकक व कोड स्वरूपासाठी storage.

Chrome DevTools आणि FontLens

Chrome DevTools आणि FontLensChrome DevToolsFontLens
मजकुराचा फॉन्ट शोधणेInspect करा, element शोधा, Computed पॅनल उघडामजकूर निवडा, राइट-क्लिक, एक मेनू पर्याय
Tailwind किंवा SCSS म्हणून कॉपीनाही, मूल्ये एकेक करून कॉपी कराCSS, SCSS, SASS किंवा Tailwind टॅब
फॉन्ट कुठून येतोNetwork पॅनलमध्ये फॉन्ट फाइल शोधाबॅज: Google Fonts, Adobe Fonts, self-hosted किंवा system
फॉन्ट फाइल डाउनलोडNetwork किंवा Sources मध्ये शोधून सेव्ह कराएक बटण
कॉन्ट्रास्ट तपासणीStyles पॅनलच्या रंग निवडीतलाइव्ह प्रिव्ह्यूजवळ AA आणि AAA चिन्हे
किंमतअंगभूतमोफत

प्रश्न

वेबसाइट कोणता फॉन्ट वापरते हे कसे शोधू?

Chrome मध्ये FontLens जोडा, साइटवरील मजकूर निवडा, राइट-क्लिक करून “Inspect font with FontLens” निवडा. फॉन्ट family, आकार, वजन, line-height, रंग आणि स्रोत दिसेल.

वेबसाइटवरील फॉन्टचे CSS कसे कॉपी करू?

इन्स्पेक्टरमध्ये CSS, SCSS, SASS किंवा Tailwind टॅब निवडून “Copy all” दाबा, किंवा एक ओळ कॉपी करा. गरज असल्यास आधी एकक px, rem, pt किंवा em करा.

वेबसाइटवरून फॉन्ट डाउनलोड करता येतो का?

मजकूर web font वापरत असल्यास “Download font” @font-face स्रोतावरून फाइल आणते. system font डाउनलोड करता येत नाही. स्वतःच्या प्रोजेक्टमध्ये वापरण्याआधी परवाना तपासा.

FontLens चित्र किंवा PDF मधला फॉन्ट ओळखू शकते का?

नाही. ते वेबपेजवरील खऱ्या मजकुराचे CSS वाचते; चित्र, canvas किंवा PDF मधील फॉन्टचे नाव सांगू शकत नाही.

WCAG साठी मजकुराचा कॉन्ट्रास्ट कसा तपासू?

प्रिव्ह्यू मजकूर आणि पार्श्वभूमीतील कॉन्ट्रास्ट गुणोत्तर सामान्य व मोठ्या मजकुरासाठी AA आणि AAA चिन्हांसह दाखवतो. रंग बदलल्यास चिन्हे अपडेट होतात.

px ऐवजी rem मधील आकार दाखवता येतो का?

हो. px, rem, pt किंवा em एकक निवडा; फील्ड आणि कोड त्यानुसार बदलतात. rem पेजच्या root font आकारावरून मोजले जाते आणि तुमची निवड लक्षात ठेवली जाते.

हे मोफत आहे का? डेटा गोळा करते का?

हे मोफत आहे, खाते लागत नाही. सर्व्हर किंवा analytics नाहीत; तुम्ही सुरू केलेले फॉन्ट डाउनलोड हीच एकमेव विनंती आहे.

हे Edge, Brave किंवा Opera मध्ये चालते का?

बहुतेक क्रोमियम ब्राउझर Chrome Web Store मधून एक्सटेंशन इन्स्टॉल करतात, ज्यात Edge, Brave, Opera आणि Vivaldi यांचा समावेश आहे. Firefox आणि Safari समर्थित नाहीत.

PYROCTAL कडून आणखी मोफत एक्स्टेंशन्स

हा कोणता फॉन्ट? दोन क्लिकमध्ये.

Add to Chrome — free