ফন্টলেন্স

Chrome-এর জন্য ফ্রি এক্সটেনশন

এটি কোন font? রাইট-ক্লিক করে CSS দেখুন

যেকোনো ওয়েবসাইটে লেখা বেছে নিয়ে রাইট-ক্লিক করুন, তারপর “Inspect font with FontLens” নির্বাচন করুন। পেজের ওপর font inspector খুলে family, আকার, পুরুত্ব, line-height ও রং দেখাবে। CSS কপি করুন বা font ডাউনলোড করুন।

Chrome-এ যোগ করুন — ফ্রি

Edge, Brave, Opera এবং অন্যান্য Chromium ব্রাউজারেও কাজ করে।

FontLens inspector: cap-height, x-height ও baseline নির্দেশিকার মাঝে Ag নমুনা, font-এর বৈশিষ্ট্য ও Tailwind কোড

এক নজরে

কী করে
আপনার বেছে নেওয়া লেখার font দেখায়: family, আকার, পুরুত্ব, line-height, রং এবং ডিফল্ট থেকে আলাদা অন্যান্য স্টাইল; CSS কপি করার জন্য তৈরি থাকে।
শুরু করবেন যেভাবে
লেখা বেছে নিন, রাইট-ক্লিক করে “Inspect font with FontLens” নির্বাচন করুন। লেখা বেছে থাকলেই মেনুর এই বিকল্পটি দেখা যায়।
যেভাবে কপি করবেন
CSS, SCSS, SASS বা Tailwind; আকার px, rem, pt বা em-এ দেখুন।
Font ফাইল
“Download font” @font-face উৎস থেকে ওয়েব font সংগ্রহ করে। ব্যবহারের আগে font-এর লাইসেন্স দেখে নিন।
কার জন্য
ওয়েব ডিজাইনার, front-end ডেভেলপার, accessibility অডিটর এবং CSS শেখা শিক্ষার্থীদের জন্য।
দাম
ফ্রি। কোনো অ্যাকাউন্ট নেই, কোনো পেইড সংস্করণ নেই।
ডেটা
আপনার ব্রাউজারেই চলে। কোনো সার্ভার বা অ্যানালিটিক্স নেই। আপনার শুরু করা font ডাউনলোডের অনুরোধটিই একমাত্র নেটওয়ার্ক অনুরোধ।
যেখানে কাজ করে
Chrome এবং Chrome Web Store থেকে এক্সটেনশন ইনস্টল করা যায় এমন অন্যান্য Chromium ব্রাউজারে। Firefox বা Safari-তে নয়।
সীমাবদ্ধতা
ওয়েব পেজের আসল লেখার CSS পড়ে। ছবি, canvases বা PDFs-এর লেখা কিংবা Chrome-এর নিজস্ব পেজ পড়ে না।
সংস্করণ
2.2.0, আপডেট হয়েছে ২৩ অক্টোবর, ২০২৬

দুই ক্লিকেই font খুঁজুন

  1. 1

    লেখা বেছে নিন

    যেকোনো ওয়েব পেজের শিরোনাম, অনুচ্ছেদ বা বোতামের লেখা।

  2. 2

    রাইট-ক্লিক করুন

    “Inspect font with FontLens” বেছে নিন। পেজের ওপর inspector খুলে family, আকার, পুরুত্ব, line-height ও রং দেখাবে।

  3. 3

    কপি করুন বা বদলান

    CSS বা Tailwind কপি করুন, লাইভ প্রিভিউতে অন্য আকার বা রং চেষ্টা করুন, অথবা font ফাইল ডাউনলোড করুন।

কেন মানুষ এটি খোলে

Aa

Typeface-এর নাম জানুন

পছন্দের কোনো শিরোনাম দেখেছেন? সেটি বেছে নিয়ে font family, পুরুত্ব ও উৎস দেখুন: Google Fonts, Adobe Fonts অথবা ওয়েবসাইটটি নিজেই।

{ }

মকআপের সঙ্গে মেলান

লাইভ পেজের মানের সঙ্গে ডিজাইন ফাইল মিলিয়ে নিন, তারপর নিয়মগুলো CSS, SCSS, SASS বা Tailwind হিসেবে কপি করুন।

4.5:1

Contrast পরীক্ষা করুন

AA ও AAA চিহ্নসহ contrast ratio দেখুন। ডিজাইন চূড়ান্ত করার আগে গাঢ় লেখা বা হালকা ব্যাকগ্রাউন্ড চেষ্টা করুন।

কী করে

  • নির্দেশিকাসহ নমুনা

    Font stack-এর প্রথম family দেখায়; cap-height, x-height ও baseline নির্দেশিকাগুলো font থেকেই মাপা হয়।

  • কোডের ফরম্যাট

    CSS, SCSS, SASS ও Tailwind। পুরো কোড বা একটি লাইন কপি করুন; শেষ ব্যবহৃত ফরম্যাটটি মনে রাখা হয়।

  • আপনার একক

    ফিল্ড ও কোডে আকার px, rem, pt বা em-এ দেখান। rem পেজের নিজস্ব root আকার অনুসরণ করে।

  • Font-এর উৎস

    ব্যাজে দেখা যায় font কোথা থেকে এসেছে: Google Fonts, Adobe Fonts, ওয়েবসাইটে রাখা, অথবা আপনার কম্পিউটারে আগে থেকে থাকা সিস্টেম font।

  • Contrast পরীক্ষা

    লেখা ও ব্যাকগ্রাউন্ডের অনুপাত সাধারণ ও বড় লেখার জন্য AA ও AAA চিহ্নসহ দেখায়; রং বদলালে এটি হালনাগাদ হয়।

  • Font ডাউনলোড

    @font-face উৎস থেকে ফাইল নিয়ে family-এর নামে রাখে। সার্ভার বাধা দিলে উৎসটি নতুন ট্যাবে খোলে।

DevTools-এ “এটি কোন font?” খুঁজতে এত সময় লাগে কেন

একটি পেজ একাধিক font-এর তালিকা দেয়, আর ব্রাউজার তার মধ্যে প্রথম উপলভ্যটি ব্যবহার করে। কোনটি তা জানতে DevTools খুলে element খুঁজতে হয়, Computed প্যানেল পড়তে হয়, তারপর Network প্যানেলে font ফাইল খুঁজতে হয়। আকার, পুরুত্ব, line-height ও রং আলাদা জায়গায় থাকে।

FontLens বেছে নেওয়া লেখার computed style পড়ে সব এক প্যানেলে আনে: family stack, প্রথম family-এর নমুনা, মাপ, font-এর উৎস ও CSS। এটি পেজের CSS পড়ে, তাই ছবির ভেতরের font-এর নাম বলতে পারে না।

আপনার ব্রাউজারের বাইরে কিছু যায় না

  • কোনো অ্যাকাউন্ট বা সার্ভার নেই

    FontLens আপনার ব্রাউজারেই চলে। কোনো অ্যানালিটিক্স বা ট্র্যাকিং নেই।

  • আপনার বেছে নেওয়া লেখাই পড়ে

    আপনি যে লেখায় রাইট-ক্লিক করেছেন, inspector তার স্টাইল পড়ে। পেজের কোনো তথ্য কোথাও পাঠানো হয় না।

  • চারটি অনুমতি

    রাইট-ক্লিক বিকল্পের জন্য context menu, inspector খোলার জন্য active tab ও page access, আর আপনার নমুনা লেখা, একক ও কোড ফরম্যাট সেভ করতে storage।

Chrome DevTools বনাম FontLens

Chrome DevTools বনাম FontLensChrome DevToolsFontLens
লেখার font খুঁজুনInspect করুন, element খুঁজুন, Computed প্যানেল খুলুনলেখা বেছে নিন, রাইট-ক্লিক, একটি মেনু বিকল্প
Tailwind বা SCSS হিসেবে কপিনা, মানগুলো একটি একটি করে কপি করুনCSS, SCSS, SASS বা Tailwind ট্যাব
Font কোথা থেকে এসেছেNetwork প্যানেলে font ফাইল খুঁজুনব্যাজ: Google Fonts, Adobe Fonts, ওয়েবসাইট বা সিস্টেম
Font ফাইল ডাউনলোডNetwork বা Sources-এ খুঁজে সেভ করুনএকটি বোতাম
Contrast পরীক্ষাStyles প্যানেলের color picker-এলাইভ প্রিভিউয়ের পাশে AA ও AAA চিহ্ন
দামঅন্তর্ভুক্তফ্রি

প্রশ্নাবলী

ওয়েবসাইট কোন font ব্যবহার করছে কীভাবে জানব?

Chrome-এ FontLens যোগ করুন, সাইটের লেখা বেছে নিয়ে রাইট-ক্লিক করুন এবং “Inspect font with FontLens” বেছে নিন। font family, আকার, পুরুত্ব, line-height, রং ও উৎস দেখতে পাবেন।

ওয়েবসাইট থেকে font-এর CSS কীভাবে কপি করব?

Inspector-এ CSS, SCSS, SASS বা Tailwind ট্যাব বেছে “Copy all” চাপুন, অথবা একটি লাইন কপি করুন। দরকার হলে আগে একক px, rem, pt বা em করে নিন।

ওয়েবসাইট থেকে font ডাউনলোড করা যাবে?

লেখায় ওয়েব font থাকলে “Download font” @font-face উৎস থেকে ফাইলটি আনে। সিস্টেম font ডাউনলোড করার ফাইল থাকে না। নিজের প্রজেক্টে ব্যবহারের আগে লাইসেন্স দেখে নিন।

FontLens কি ছবি বা PDF-এর font চিনতে পারে?

না। এটি ওয়েব পেজের আসল লেখার CSS পড়ে, তাই ছবি, canvases বা PDFs-এর font শনাক্ত করতে পারে না।

WCAG-এর জন্য লেখার contrast কীভাবে পরীক্ষা করব?

প্রিভিউতে লেখার রং ও ব্যাকগ্রাউন্ডের contrast ratio, সাধারণ ও বড় লেখার AA এবং AAA চিহ্নসহ দেখা যায়। যেকোনো রং বদলালে চিহ্নগুলো হালনাগাদ হয়।

px-এর বদলে rem-এ আকার দেখানো যাবে?

হ্যাঁ। একক px, rem, pt বা em বেছে নিন; ফিল্ড ও কোড সেই অনুযায়ী বদলাবে। rem পেজের root font-size থেকে হিসাব হয়, আর আপনার পছন্দ মনে রাখা হয়।

এটি কি ফ্রি? ডেটা সংগ্রহ করে?

এটি ফ্রি, কোনো অ্যাকাউন্ট লাগে না। কোনো সার্ভার বা অ্যানালিটিক্স নেই; শুধু আপনার শুরু করা font ডাউনলোডের অনুরোধ হয়।

Edge, Brave বা Opera-তে কাজ করে?

Edge, Brave, Opera ও Vivaldi-সহ বেশিরভাগ Chromium ব্রাউজারে Chrome Web Store থেকে এক্সটেনশন ইনস্টল করা যায়। Firefox ও Safari সমর্থিত নয়।

PYROCTAL-এর আরও বিনামূল্যের এক্সটেনশন

এটি কোন font? দুই ক্লিকেই জানুন।

Chrome-এ যোগ করুন — ফ্রি