ஃபான்ட்லென்ஸ்

Chrome க்கான இலவச நீட்டிப்பு

இது என்ன எழுத்துரு? வலது கிளிக் செய்து CSS பாருங்கள்

எந்த வலைத்தளத்திலும் உரையைத் தேர்ந்தெடுத்து வலது கிளிக் செய்து “Inspect font with FontLens” என்பதைத் தேர்ந்தெடுங்கள். பக்கத்தின் மேல் திறக்கும் எழுத்துரு ஆய்வியில் family, அளவு, தடிமன், வரி உயரம், நிறம், நகலெடுக்கத் தயாரான CSS, எழுத்துருவைப் பதிவிறக்கும் பொத்தான் ஆகியவற்றைக் காணலாம்.

Chrome இல் சேர்க்கவும் — இலவசம்

Edge, Brave, Opera மற்றும் பிற Chromium உலாவிகளிலும் வேலை செய்யும்.

FontLens ஆய்வி: cap-height, x-height, baseline கோடுகளுக்கு இடையிலான Ag மாதிரி, எழுத்துருப் பண்புகள் மற்றும் Tailwind குறியீடு

ஒரு பார்வையில்

இது என்ன செய்கிறது
நீங்கள் தேர்ந்தெடுக்கும் உரையின் எழுத்துரு family, அளவு, தடிமன், வரி உயரம், நிறம் மற்றும் இயல்பிலிருந்து மாறிய பிற பாணிகளைக் காட்டி, CSS-ஐ நகலெடுக்கத் தயாராக வைக்கிறது.
எப்படித் தொடங்குவது
உரையைத் தேர்ந்தெடுத்து, வலது கிளிக் செய்து “Inspect font with FontLens” என்பதைத் தேர்ந்தெடுங்கள். உரையைத் தேர்ந்தெடுத்தால் மட்டுமே இந்த மெனு உருப்படி தோன்றும்.
நகலெடுக்கும் வடிவங்கள்
CSS, SCSS, SASS அல்லது Tailwind; அளவை px, rem, pt அல்லது em ஆகத் தேர்ந்தெடுக்கலாம்.
எழுத்துருக் கோப்பு
“Download font” அதன் @font-face மூலத்திலிருந்து வலை எழுத்துருவைப் பெறும். பயன்படுத்தும் முன் எழுத்துரு உரிமத்தைச் சரிபாருங்கள்.
யாருக்குப் பயன்படும்
வலை வடிவமைப்பாளர்கள், front-end டெவலப்பர்கள், அணுகல்தன்மை தணிக்கையாளர்கள், CSS கற்கும் மாணவர்கள்.
விலை
இலவசம். கணக்கு தேவையில்லை, கட்டணப் பதிப்பும் இல்லை.
தரவு
உங்கள் உலாவியிலேயே இயங்கும். சர்வர்கள் இல்லை, பகுப்பாய்வு இல்லை. நீங்கள் தொடங்கும் எழுத்துருப் பதிவிறக்கம் மட்டுமே கோரிக்கையாக அனுப்பப்படும்.
இயங்கும் உலாவிகள்
Chrome மற்றும் Chrome Web Store இலிருந்து நீட்டிப்புகளை நிறுவும் பிற Chromium உலாவிகள். Firefox அல்லது Safari இல் இயங்காது.
வரம்புகள்
வலைப்பக்கங்களில் உள்ள உண்மையான உரையின் CSS-ஐப் படிக்கும். படங்கள், canvas, PDF-களில் உள்ள உரையையோ Chrome-இன் சொந்தப் பக்கங்களையோ படிக்காது.
பதிப்பு
2.2.0, 23 அக்டோபர், 2026 அன்று புதுப்பிக்கப்பட்டது

இரண்டு கிளிக்கில் எழுத்துருவைக் காணுங்கள்

  1. 1

    உரையைத் தேர்ந்தெடுங்கள்

    எந்த வலைப்பக்கத்திலும் தலைப்பு, பத்தி அல்லது பொத்தான் உரையைத் தேர்ந்தெடுக்கலாம்.

  2. 2

    வலது கிளிக் செய்யுங்கள்

    “Inspect font with FontLens” என்பதைத் தேர்ந்தெடுங்கள். பக்கத்தின் மேல் திறக்கும் ஆய்வியில் family, அளவு, தடிமன், வரி உயரம், நிறம் ஆகியவை தெரியும்.

  3. 3

    நகலெடுக்கவும் அல்லது மாற்றவும்

    CSS அல்லது Tailwind-ஐ நகலெடுங்கள், நேரலை முன்னோட்டத்தில் அளவு அல்லது நிறத்தை மாற்றிப் பாருங்கள், அல்லது எழுத்துருக் கோப்பைப் பதிவிறக்குங்கள்.

பயனர்கள் இதை ஏன் திறக்கிறார்கள்

Aa

எழுத்துருவைக் கண்டறியுங்கள்

பிடித்த தலைப்பைப் பார்த்தீர்களா? அதைத் தேர்ந்தெடுத்து family, தடிமன், எழுத்துரு வரும் இடம் ஆகியவற்றைப் பாருங்கள்: Google Fonts, Adobe Fonts அல்லது அந்தத் தளம்.

{ }

வடிவமைப்புடன் ஒப்பிடுங்கள்

நேரலைப் பக்கத்தின் அளவுகளை வடிவமைப்புக் கோப்புடன் ஒப்பிட்டு, விதிகளை CSS, SCSS, SASS அல்லது Tailwind ஆக நகலெடுங்கள்.

4.5:1

கான்டிராஸ்டைச் சரிபாருங்கள்

AA, AAA குறியீடுகளுடன் கான்டிராஸ்ட் விகிதத்தைப் பாருங்கள். வடிவமைப்பை வெளியிடும் முன் அடர் உரையையோ வெளிர் பின்னணியையோ முயற்சியுங்கள்.

இது என்ன செய்கிறது

  • அளவுக் கோடுகளுடன் மாதிரி

    எழுத்துருவிலிருந்தே அளவிடப்பட்ட cap-height, x-height, baseline கோடுகளுக்கு இடையில் stack-இன் முதல் family காட்டப்படும்.

  • குறியீட்டு வடிவங்கள்

    CSS, SCSS, SASS, Tailwind. முழுக் குறியீட்டையோ ஒரு வரியையோ நகலெடுங்கள்; கடைசியாகப் பயன்படுத்திய வடிவம் நினைவில் வைக்கப்படும்.

  • உங்கள் அலகுகள்

    புலங்களிலும் குறியீட்டிலும் அளவை px, rem, pt அல்லது em ஆகக் காட்டுங்கள். rem பக்கத்தின் root அளவைப் பின்பற்றும்.

  • எழுத்துரு மூலம்

    Google Fonts, Adobe Fonts, சுய-ஹோஸ்ட் அல்லது உங்கள் கணினியில் உள்ள system font என எழுத்துரு வரும் இடத்தைப் பேட்ஜ் காட்டும்.

  • கான்டிராஸ்ட் சோதனை

    உரைக்கும் பின்னணிக்கும் இடையிலான விகிதம், சாதாரண மற்றும் பெரிய உரைக்கான AA, AAA குறியீடுகளுடன் காட்டப்படும்; நிறத்தை மாற்றும்போது புதுப்பிக்கப்படும்.

  • Download font

    @font-face மூலத்திலிருந்து கோப்பைப் பெற்று, family பெயரில் சேமிக்கும். சர்வர் தடுத்தால், அந்த மூலத்தைப் புதிய தாவலில் திறக்கும்.

DevTools-இல் எழுத்துருவைக் கண்டுபிடிப்பது ஏன் நேரமாகிறது

ஒரு பக்கம் பல எழுத்துருக்களைப் பட்டியலிடும்; உலாவி கிடைக்கும் முதல் எழுத்துருவைப் பயன்படுத்தும். எது பயன்படுத்தப்படுகிறது என அறிய DevTools திறந்து, உறுப்பைக் கண்டுபிடித்து, Computed panel-ஐப் படித்து, Network panel-இல் எழுத்துருக் கோப்பைத் தேட வேண்டும். அளவு, தடிமன், வரி உயரம், நிறம் என ஒவ்வொன்றும் வேறு இடத்தில் இருக்கும்.

நீங்கள் தேர்ந்தெடுத்த உரையின் computed style-ஐ FontLens படித்து ஒரே panel-இல் காட்டும்: family stack, முதல் family-யின் மாதிரி, அளவுகள், எழுத்துரு மூலம், CSS. இது பக்கத்தின் CSS-ஐப் படிப்பதால் படத்துக்குள் இருக்கும் எழுத்துருவைக் கண்டறிய முடியாது.

உங்கள் உலாவியை விட்டு எதுவும் வெளியேறாது

  • கணக்கு இல்லை, சர்வர்களும் இல்லை

    ஃபான்ட்லென்ஸ் உங்கள் உலாவியில் இயங்கும். பகுப்பாய்வோ கண்காணிப்போ இல்லை.

  • நீங்கள் தேர்ந்தெடுத்ததை மட்டும் படிக்கும்

    நீங்கள் வலது கிளிக் செய்த உரையின் பாணிகளை ஆய்வி படிக்கும். பக்கத்தைப் பற்றிய எந்தத் தகவலும் அனுப்பப்படாது.

  • நான்கு அனுமதிகள்

    வலது கிளிக் மெனுவுக்கு context menu; ஆய்வியைத் திறக்க active tab மற்றும் பக்க அணுகல்; மாதிரி உரை, அலகு, குறியீட்டு வடிவத்தைச் சேமிக்க storage.

Chrome DevTools மற்றும் FontLens

Chrome DevTools மற்றும் FontLensChrome DevToolsஃபான்ட்லென்ஸ்
உரையின் எழுத்துருவைக் கண்டறிதல்ஆய்வு செய்து, உறுப்பைக் கண்டுபிடித்து, Computed panel திறக்கவும்உரையைத் தேர்ந்தெடுத்து, வலது கிளிக் செய்து, மெனுவைத் தேர்ந்தெடுக்கவும்
Tailwind அல்லது SCSS ஆக நகலெடுத்தல்இல்லை; மதிப்புகளை ஒவ்வொன்றாக நகலெடுக்கவும்CSS, SCSS, SASS அல்லது Tailwind தாவல்
எழுத்துரு எங்கிருந்து வருகிறதுNetwork panel-இல் எழுத்துருக் கோப்பைத் தேடவும்பேட்ஜ்: Google Fonts, Adobe Fonts, சுய-ஹோஸ்ட் அல்லது system
எழுத்துருக் கோப்பைப் பதிவிறக்குதல்Network அல்லது Sources-இல் தேடிச் சேமிக்கவும்ஒரு பொத்தான்
கான்டிராஸ்ட் சோதனைStyles panel-இன் வண்ணத் தேர்வியில்நேரலை முன்னோட்டத்துடன் AA, AAA குறியீடுகள்
விலைஉள்ளமைந்ததுஇலவசம்

கேள்விகள்

ஒரு வலைத்தளம் எந்த எழுத்துருவைப் பயன்படுத்துகிறது என எப்படிக் கண்டுபிடிப்பது?

ஃபான்ட்லென்ஸை Chrome இல் சேர்த்து, தளத்தில் உரையைத் தேர்ந்தெடுத்து வலது கிளிக் செய்து “Inspect font with FontLens” என்பதைத் தேர்ந்தெடுங்கள். எழுத்துரு family, அளவு, தடிமன், வரி உயரம், நிறம், அது வரும் இடம் ஆகியவற்றைக் காணலாம்.

வலைத்தளத்திலிருந்து எழுத்துருவின் CSS-ஐ எப்படி நகலெடுப்பது?

ஆய்வியில் CSS, SCSS, SASS அல்லது Tailwind தாவலைத் தேர்ந்தெடுத்து “Copy all” என்பதை அழுத்துங்கள்; அல்லது ஒரு வரியை மட்டும் நகலெடுங்கள். தேவைப்பட்டால் முதலில் அலகை px, rem, pt அல்லது em ஆக மாற்றுங்கள்.

வலைத்தளத்திலிருந்து எழுத்துருவைப் பதிவிறக்க முடியுமா?

உரை web font-ஐப் பயன்படுத்தினால், “Download font” அதன் @font-face மூலத்திலிருந்து கோப்பைப் பெறும். system font-ஐப் பதிவிறக்க முடியாது. உங்கள் திட்டத்தில் பயன்படுத்தும் முன் உரிமத்தைச் சரிபாருங்கள்.

படம் அல்லது PDF-இல் உள்ள எழுத்துருவை ஃபான்ட்லென்ஸ் கண்டறியுமா?

இல்லை. வலைப்பக்கங்களில் உள்ள உண்மையான உரையின் CSS-ஐப் படிப்பதால், படங்கள், canvas அல்லது PDF-களில் உள்ள எழுத்துருவைச் சொல்ல முடியாது.

WCAG-க்கான உரை கான்டிராஸ்டை எப்படிச் சரிபார்ப்பது?

முன்னோட்டம் உரை நிறத்துக்கும் பின்னணிக்கும் இடையிலான கான்டிராஸ்ட் விகிதத்தையும், சாதாரண மற்றும் பெரிய உரைக்கான AA, AAA குறியீடுகளையும் காட்டும். எந்த நிறத்தையும் மாற்றினால் குறியீடுகள் புதுப்பிக்கப்படும்.

px-க்குப் பதிலாக rem-இல் அளவைக் காட்ட முடியுமா?

ஆம். அலகை px, rem, pt அல்லது em ஆக மாற்றுங்கள்; புலங்களும் குறியீடும் அதைப் பின்பற்றும். rem பக்கத்தின் root font size-ஐ வைத்து கணக்கிடப்படும்; உங்கள் தேர்வு நினைவில் வைக்கப்படும்.

இது இலவசமா? தரவைச் சேகரிக்கிறதா?

இலவசம்; கணக்கு தேவையில்லை. சர்வர்களோ பகுப்பாய்வோ இல்லை. நீங்கள் தொடங்கும் எழுத்துருப் பதிவிறக்கம் மட்டுமே கோரிக்கையாக அனுப்பப்படும்.

இது Edge, Brave அல்லது Opera-வில் வேலை செய்யுமா?

பெரும்பாலான Chromium உலாவிகள் Chrome Web Store இலிருந்து நீட்டிப்புகளை நிறுவும்; Edge, Brave, Opera, Vivaldi உட்பட. Firefox, Safari ஆதரிக்கப்படாது.

PYROCTAL வழங்கும் மேலும் இலவச நீட்டிப்புகள்

இது என்ன எழுத்துரு? இரண்டு கிளிக்கில்.

Chrome இல் சேர்க்கவும் — இலவசம்