ಫಾಂಟ್‌ಲೆನ್ಸ್

Chrome ಗಾಗಿ ಉಚಿತ ಎಕ್ಸ್‌ಟೆನ್ಶನ್

ಇದು ಯಾವ ಫಾಂಟ್? ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ CSS ನೋಡಿ

ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಪಠ್ಯ ಆಯ್ಕೆಮಾಡಿ, ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ, “Inspect font with FontLens” ಆಯ್ಕೆಮಾಡಿ. ಪುಟದ ಮೇಲೆ ಫಾಂಟ್ ಇನ್ಸ್‌ಪೆಕ್ಟರ್ ತೆರೆದು family, ಗಾತ್ರ, ತೂಕ, line-height, ಬಣ್ಣ, ಕಾಪಿ ಮಾಡಲು ಸಿದ್ಧವಾದ CSS ಮತ್ತು ಫಾಂಟ್ ಡೌನ್‌ಲೋಡ್ ಬಟನ್ ತೋರಿಸುತ್ತದೆ.

Chrome ಗೆ ಸೇರಿಸಿ — ಉಚಿತ

Edge, Brave, Opera ಮತ್ತು ಇತರ Chromium ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

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 ಡೆವಲಪರ್‌ಗಳು, ಪ್ರವೇಶಸಾಧ್ಯತೆ ಪರಿಶೀಲಕರು ಮತ್ತು CSS ಕಲಿಯುವ ವಿದ್ಯಾರ್ಥಿಗಳು.
ಬೆಲೆ
ಉಚಿತ. ಖಾತೆ ಇಲ್ಲ, ಪಾವತಿಸಿದ ಆವೃತ್ತಿ ಇಲ್ಲ.
ಡೇಟಾ
ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಸರ್ವರ್‌ಗಳಿಲ್ಲ, ಅನಾಲಿಟಿಕ್ಸ್ ಇಲ್ಲ. ನೀವು ಆರಂಭಿಸುವ ಫಾಂಟ್ ಡೌನ್‌ಲೋಡ್ ಮಾತ್ರ ವಿನಂತಿಯಾಗಿದೆ.
ಎಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
Chrome Web Store ನಿಂದ ಸ್ಥಾಪಿಸುವ Chrome ಮತ್ತು ಇತರ Chromium ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ. Firefox ಅಥವಾ Safari ನಲ್ಲಿ ಅಲ್ಲ.
ಮಿತಿಗಳು
ವೆಬ್ ಪುಟಗಳಲ್ಲಿನ ನೈಜ ಪಠ್ಯದ CSS ಓದುತ್ತದೆ. ಚಿತ್ರ, canvas ಅಥವಾ PDF ಪಠ್ಯವನ್ನಾಗಲಿ Chrome ನ ಸ್ವಂತ ಪುಟಗಳನ್ನಾಗಲಿ ಓದುವುದಿಲ್ಲ.
ಆವೃತ್ತಿ
2.2.0, ಅಕ್ಟೋಬರ್ 23, 2026 ರಂದು ಅಪ್‌ಡೇಟ್ ಮಾಡಲಾಗಿದೆ

ಫಾಂಟ್‌ಗೆ ಎರಡು ಕ್ಲಿಕ್‌ಗಳು

  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 ಮತ್ತು ಬಣ್ಣ ಬೇರೆ ಬೇರೆ ಕಡೆ ಇರುತ್ತವೆ.

FontLens ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಪಠ್ಯದ computed style ಓದಿ ಒಂದೇ ಪ್ಯಾನೆಲ್‌ನಲ್ಲಿ ಇಡುತ್ತದೆ: family stack, ಮೊದಲ family ಮಾದರಿ, ಅಳತೆಗಳು, ಫಾಂಟ್ ಮೂಲ ಮತ್ತು CSS. ಪುಟದ CSS ಓದುವ ಕಾರಣ ಚಿತ್ರದಲ್ಲಿನ ಫಾಂಟ್ ಹೆಸರನ್ನು ಹೇಳಲಾರದು.

ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಿಂದ ಏನೂ ಹೊರಗೆ ಹೋಗುವುದಿಲ್ಲ

  • ಖಾತೆ ಇಲ್ಲ, ಸರ್ವರ್ ಇಲ್ಲ

    FontLens ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಅನಾಲಿಟಿಕ್ಸ್ ಇಲ್ಲ, ಟ್ರ್ಯಾಕಿಂಗ್ ಇಲ್ಲ.

  • ನೀವು ಆಯ್ಕೆ ಮಾಡಿದುದನ್ನೇ ಓದುತ್ತದೆ

    ನೀವು ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿದ ಪಠ್ಯದ ಶೈಲಿಗಳನ್ನು ಇನ್ಸ್‌ಪೆಕ್ಟರ್ ಓದುತ್ತದೆ. ಪುಟದ ಯಾವುದೇ ಮಾಹಿತಿ ಎಲ್ಲಿಗೂ ಕಳುಹಿಸುವುದಿಲ್ಲ.

  • ನಾಲ್ಕು ಅನುಮತಿಗಳು

    ರೈಟ್-ಕ್ಲಿಕ್ ಆಯ್ಕೆಗೆ 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 ಗಾತ್ರದಿಂದ ಲೆಕ್ಕವಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಆಯ್ಕೆ ನೆನಪಿರುತ್ತದೆ.

ಇದು ಉಚಿತವೇ? ಡೇಟಾ ಸಂಗ್ರಹಿಸುತ್ತದೆಯೇ?

ಇದು ಉಚಿತ, ಖಾತೆ ಬೇಕಿಲ್ಲ. ಸರ್ವರ್ ಅಥವಾ ಅನಾಲಿಟಿಕ್ಸ್ ಇಲ್ಲ; ನೀವು ಆರಂಭಿಸುವ ಫಾಂಟ್ ಡೌನ್‌ಲೋಡ್ ಮಾತ್ರ ವಿನಂತಿ.

ಇದು Edge, Brave ಅಥವಾ Opera ದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯೇ?

Edge, Brave, Opera ಮತ್ತು Vivaldi ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ Chromium ಬ್ರೌಸರ್‌ಗಳು Chrome Web Store ನಿಂದ ಎಕ್ಸ್‌ಟೆನ್ಶನ್‌ಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿಕೊಳ್ಳುತ್ತವೆ. Firefox ಮತ್ತು Safari ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.

PYROCTAL ನಿಂದ ಇನ್ನಷ್ಟು ಉಚಿತ ಎಕ್ಸ್‌ಟೆನ್ಶನ್‌ಗಳು

ಇದು ಯಾವ ಫಾಂಟ್? ಎರಡು ಕ್ಲಿಕ್‌ಗಳಲ್ಲಿ.

Add to Chrome — free