ഫോണ്ട്‌ലെൻസ്

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, പുതുക്കിയത് 2026 ഒക്‌ടോബർ 23

ഫോണ്ടിലേക്ക് രണ്ട് ക്ലിക്കുകൾ

  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 നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു. അനലിറ്റിക്സോ ട്രാക്കിങ്ങോ ഇല്ല.

  • നിങ്ങൾ തിരഞ്ഞെടുക്കുന്നതു മാത്രം വായിക്കുന്നു

    നിങ്ങൾ റൈറ്റ്-ക്ലിക്ക് ചെയ്ത ടെക്സ്റ്റിന്റെ ശൈലികളാണ് ഇൻസ്പെക്ടർ വായിക്കുന്നത്. പേജിനെക്കുറിച്ചുള്ള വിവരങ്ങളൊന്നും എവിടെയും അയയ്ക്കില്ല.

  • നാല് അനുമതികൾ

    റൈറ്റ്-ക്ലിക്ക് ഓപ്ഷന് context menu, ഇൻസ്പെക്ടർ തുറക്കാൻ active tab, പേജ് ആക്സസ്, സാമ്പിൾ ടെക്സ്റ്റ്, യൂണിറ്റ്, കോഡ് ഫോർമാറ്റ് എന്നിവയ്ക്ക് storage.

Chrome DevTools, FontLens എന്നിവ

Chrome DevTools, FontLens എന്നിവChrome 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 ഡൗൺലോഡ് ചെയ്യാനാവില്ല. സ്വന്തം പ്രോജക്റ്റിൽ ഉപയോഗിക്കുന്നതിന് മുമ്പ് ലൈസൻസ് പരിശോധിക്കൂ.

ചിത്രത്തിലെയോ PDF-ലെയോ ഫോണ്ട് FontLens തിരിച്ചറിയുമോ?

ഇല്ല. വെബ് പേജിലെ യഥാർഥ ടെക്സ്റ്റിന്റെ CSS ആണ് വായിക്കുന്നത്; ചിത്രങ്ങളിലെയും canvas-ലെയും PDF-ലെയും ഫോണ്ടുകൾ തിരിച്ചറിയില്ല.

WCAG-നായി ടെക്സ്റ്റ് കോൺട്രാസ്റ്റ് എങ്ങനെ പരിശോധിക്കാം?

ടെക്സ്റ്റിന്റെയും പശ്ചാത്തലത്തിന്റെയും കോൺട്രാസ്റ്റ് അനുപാതം പ്രിവ്യൂ കാണിക്കും; സാധാരണയും വലിയതുമായ ടെക്സ്റ്റിന് AA, AAA മാർക്കുകളും ഉണ്ടാകും. നിറം മാറ്റിയാൽ മാർക്കുകൾ പുതുക്കും.

px-ന് പകരം rem-ൽ വലുപ്പം കാണിക്കാമോ?

കഴിയും. px, rem, pt അല്ലെങ്കിൽ em തിരഞ്ഞെടുക്കൂ; ഫീൽഡുകളും കോഡും അതനുസരിച്ച് മാറും. പേജിന്റെ root font വലുപ്പത്തിൽ നിന്നാണ് rem കണക്കാക്കുന്നത്; നിങ്ങളുടെ തിരഞ്ഞെടുപ്പ് ഓർത്തിരിക്കും.

ഇത് സൗജന്യമാണോ? ഡാറ്റ ശേഖരിക്കുമോ?

ഇത് സൗജന്യമാണ്, അക്കൗണ്ട് വേണ്ട. സെർവറുകളോ അനലിറ്റിക്സോ ഇല്ല; നിങ്ങൾ തുടങ്ങുന്ന ഫോണ്ട് ഡൗൺലോഡ് മാത്രമാണ് ഏക അഭ്യർത്ഥന.

ഇത് Edge, Brave, Opera എന്നിവയിൽ പ്രവർത്തിക്കുമോ?

Edge, Brave, Opera, Vivaldi എന്നിവയുൾപ്പെടെ മിക്ക Chromium ബ്രൗസറുകളും Chrome Web Store-ൽ നിന്ന് എക്സ്റ്റൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ അനുവദിക്കുന്നു. Firefox, Safari എന്നിവയെ പിന്തുണയ്ക്കുന്നില്ല.

PYROCTAL-ൽ നിന്നുള്ള കൂടുതൽ സൗജന്യ എക്സ്റ്റൻഷനുകൾ

ഇത് ഏത് ഫോണ്ടാണ്? രണ്ട് ക്ലിക്കുകൾ മതി.

Add to Chrome — free