কম্পিউটার

ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

আপনার ওয়েবসাইটের সাফল্য অনেকটাই নির্ভর করে এর চেহারার উপর। সঠিক রঙের সংমিশ্রণ এবং থিম থাকলে আপনার ভিজিটরদের আপনার সাইটে আরও কিছুক্ষণ রাখা হবে। আপনার সাইটের রঙ প্যালেট এবং গঠন ছাড়াও, আপনি যে ফন্টটি বেছে নেন সেটিও আপনার দর্শকদের ব্যস্ত রাখতে একটি অপরিহার্য ভূমিকা পালন করে।

ওয়েব ব্রাউজ করার সময় সম্ভবত আপনি একটি আকর্ষণীয় সাইট দেখতে পান এবং আপনি জানতে চান যে এটি কোন ফন্ট ব্যবহার করছে। অনলাইন এক্সটেনশন এবং আপনার ব্রাউজারের বিল্ট-ইন ইনস্পেক্ট এলিমেন্ট টুলের সাহায্যে একটি ফন্ট শনাক্ত করা দ্রুত এবং সহজ।

কিভাবে ইন্সপেক্ট এলিমেন্ট টুল ব্যবহার করে ফন্ট খুঁজে বের করতে হয়

আপনি না জানলে, আপনার ব্রাউজারের বিল্ট-ইন ইনস্পেক্ট এলিমেন্ট টুল আপনাকে ওয়েবসাইটের সোর্স কোড পরীক্ষা করতে দেয়। আপনি একটি সাইটের সিএসএস, এইচটিএমএল এবং অন্যান্য তথ্য দেখে এর ডিজাইন উপাদানগুলি বুঝতে পারেন। আপনার নিজের সাইট ডিজাইন করার সময় এটি অনুপ্রেরণা পাওয়ার একটি দুর্দান্ত উপায়৷

Inspect Element টুল ব্যবহার করে একটি ফন্ট সনাক্ত করার প্রক্রিয়াটি বেশ সহজ, এবং আপনার কোন কোডিং দক্ষতার প্রয়োজন হবে না। এই টুলটি বাজারে সব ব্রাউজারে পাওয়া যায় এবং প্রতিটিরই একই রকম লেআউট রয়েছে।

আপনার ব্রাউজারের পরিদর্শন টুল ব্যবহার করে কীভাবে একটি ফন্ট শনাক্ত করবেন তা এখানে।

  1. আপনি যে ওয়েবসাইটটি ব্যবহার করতে চান সেটি খুলুন।
  2. আপনি যে ফন্টটি সনাক্ত করতে চান সেই টেক্সটটি হাইলাইট করুন এবং ডান-ক্লিক করুন।
  3. পরিদর্শন-এ ক্লিক করুন প্রসঙ্গ মেনু থেকে। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  4. পরিদর্শন মেনু খুললে, গণনা করা-এ ক্লিক করুন .
  5. ফন্ট-ফ্যামিলি খুঁজতে নিচে স্ক্রোল করুন অধ্যায়. এখানে, আপনি ফন্টের নাম এবং শৈলী, সেইসাথে এর মাত্রা খুঁজে পেতে পারেন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

পরিদর্শন টুল ব্যবহার করার অন্যান্য উপায়

আপনি যদি পরিদর্শন টুল ব্যবহার করে একটি সাইটের ফন্ট খুঁজে পেতে একটি দ্রুত উপায় চান, তাহলে পরিবর্তে এটি চেষ্টা করুন:

  1. আপনি যে ওয়েবসাইটটি ব্যবহার করতে চান সেটি খুলুন।
  2. Ctrl + Shift + C টিপুন (Cmd + Shift + C ম্যাকে)।
  3. ফন্ট স্টাইল, সাইজ, কালার কোড এবং মার্জিন প্রদর্শন করতে টেক্সটের উপর হভার করুন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

আপনি পরিদর্শন টুল ব্যবহার করে একটি ওয়েবপেজে ব্যবহৃত ফন্টের তালিকাও পরীক্ষা করতে পারেন। এটি কীভাবে করবেন তা এখানে:

  1. ওয়েবপেজে যান।
  2. Ctrl + Shift + I টিপে সোর্স কোড খুলুন (Cmd + Shift + I ম্যাকে)।
  3. নেটওয়ার্ক-এ ক্লিক করুন ট্যাব, এবং তারপর ফন্ট নির্বাচন করুন ট্যাব
  4. এখানে, আপনি ওয়েবপেজে ব্যবহৃত সমস্ত ফন্টের একটি তালিকা দেখতে পাবেন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

রিয়েল-টাইমে সমস্ত ফন্টের তালিকা পেতে, আপনাকে ওয়েবপৃষ্ঠাটি রিফ্রেশ করতে হতে পারে৷

কিভাবে ব্রাউজার এক্সটেনশন ব্যবহার করে ফন্ট সনাক্ত করতে হয়

আপনি যদি একটি ফন্ট সনাক্ত করার আরও সুবিধাজনক উপায় চান তবে আপনি একটি ফন্ট-ফাইন্ডিং ব্রাউজার এক্সটেনশন ইনস্টল করতে চাইতে পারেন। যদিও বেশ কিছু ব্রাউজার এক্সটেনশন রয়েছে যা ওয়েবে ফন্ট সনাক্ত করতে সাহায্য করতে পারে, দুটি সবচেয়ে জনপ্রিয় হল WhatFont এবং ফন্ট ফাইন্ডার .

আসুন উভয় এক্সটেনশন ব্যবহার করে ফন্ট সনাক্ত করার প্রক্রিয়াটি একবার দেখে নেওয়া যাক।

1. WhatFont

একই সাথে একাধিক ফন্ট দ্রুত সনাক্ত করার জন্য WhatFont ব্যাপকভাবে জনপ্রিয়। এই টুলটি কিভাবে ব্যবহার করবেন তা এখানে।

  1. যখন আপনার ব্রাউজারে WhatFont সক্রিয় করা থাকে, তখন তার ফন্ট দেখানোর জন্য টেক্সটটির উপরে হোভার করুন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  2. একবার আপনি টেক্সটে ক্লিক করলে, ফন্টের বাকি বিবরণ যেমন ফন্টের আকার, রঙ এবং শৈলী সহ একটি পপআপ উইন্ডো প্রদর্শিত হবে। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  3. উপরন্তু, আপনি একই পৃষ্ঠায় বিভিন্ন ফন্টের তুলনা করতে একই সাথে পাঠ্যের একাধিক বিভাগ নির্বাচন করতে পারেন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

2. ফন্ট ফাইন্ডার

ফন্ট ফাইন্ডারও ফন্টের বিশদ বিবরণ প্রদর্শন করে যখন আপনি কোনও ওয়েবসাইটের কোনও টেক্সটের উপর হোভার করেন। যাইহোক, এটি অনেক প্রযুক্তিগত বিবরণ প্রদান করে, তাই আপনি যদি ওয়েব ডিজাইনের সাথে পরিচিত না হন তবে এটি একটু বিভ্রান্তিকর হতে পারে৷

ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

এটি বলেছে, ফন্ট ফাইন্ডার ওয়েব ডেভেলপারদের জন্য আরও উপযুক্ত যারা বিদ্যমান ফন্টগুলিকে রিয়েল-টাইমে নতুনগুলির সাথে প্রতিস্থাপন করতে চান৷ এটি কোনো স্থায়ী পরিবর্তন করার আগে ফন্ট পরীক্ষা করা সহজ করে তোলে।

এখানে ফন্ট ফাইন্ডার ব্যবহার করে ফন্ট পরীক্ষা করার পদ্ধতি রয়েছে:

  1. ওয়েবপৃষ্ঠা থেকে পাঠ্যের একটি অংশ হাইলাইট করুন।
  2. এটিতে ডান-ক্লিক করুন এবং ফন্ট ফাইন্ডার নির্বাচন করুন প্রসঙ্গ মেনু থেকে। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  3. এর সাথে ফন্ট প্রতিস্থাপন করুন নির্বাচন করুন এবং ফন্টের নাম লিখুন। চলুন যোগ করা যাক ক্যালিব্রি এবং প্রিভিউতে এটি কীভাবে ফন্ট পরিবর্তন করে তা দেখুন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  4. আপনি যদি ফন্ট রিসেট করতে চান, পৃষ্ঠাটি রিফ্রেশ করুন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

একটি ছবিতে ফন্ট চেক করার বিষয়ে কি?

আপনি যদি একটি ছবিতে ফন্টগুলি সনাক্ত করতে চান, ব্রাউজার এক্সটেনশন এবং আপনার ব্রাউজারের পরিদর্শন টুল সাহায্য নাও করতে পারে। যাইহোক, আপনি WhatFontIs, FontSquirrel, Fontspring, WhatTheFont এবং আরও অনেকের মত অনলাইন ইমেজ ইন্সপেক্টর টুল ব্যবহার করে দেখতে পারেন।

একটি ছবি থেকে ফন্ট শনাক্ত করার প্রক্রিয়াটি সব টুলে অনেকাংশে একই। আসুন WhatTheFont ব্যবহার করে একটি ছবিতে ফন্টটি সনাক্ত করার চেষ্টা করি।

  1. যদি আপনি ইতিমধ্যেই না করে থাকেন, আপনি যে ছবিটি ব্যবহার করতে চান সেটি ডাউনলোড করুন।
  2. WhatTheFont এ ইমেজ ইমপোর্ট করুন। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  3. WhatTheFont স্বয়ংক্রিয়ভাবে আপনার চিত্রের পাঠ্য সনাক্ত করবে। ক্রপ বক্সটি সঙ্কুচিত বা বড় করুন যাতে আপনি যে ফন্টটিকে সনাক্ত করতে চান সেটিকে ঘিরে থাকে। তীর বোতাম টিপুন যখন শেষ হবে. ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  4. WhatTheFont তারপর ছবির ফন্টের সাথে এর গ্যালারীতে থাকা ফন্টের সাথে মিলবে এবং আপনাকে ঘনিষ্ঠভাবে সম্পর্কিত ফন্টগুলি দেখাবে। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন
  5. যদি আপনি এখনই একটি ভাল মিল খুঁজে না পান, আপনি ক্লিক করতে পারেন আরো ফলাফল দেখান আরও সম্পর্কিত ফন্ট দেখতে। ইন্সপেক্ট এলিমেন্ট টুল এবং ব্রাউজার এক্সটেনশন ব্যবহার করে কিভাবে একটি ওয়েবপেজ ফন্ট খুঁজে বের করবেন

ওয়েব থেকে ফন্ট সনাক্ত করুন এবং আপনার ডিজাইনে ব্যবহার করুন

একটি ওয়েবসাইট বা গ্রাফিক ডিজাইনের সাফল্যে ফন্ট একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। ওয়েব ব্রাউজ করার সময় আপনি যদি একটি আকর্ষক ফন্টে হোঁচট খেয়ে থাকেন, তাহলে উপরের পদ্ধতিগুলি ব্যবহার করে আপনি সহজেই এটি সনাক্ত করতে পারেন।


  1. কিভাবে একটি সাইট পরীক্ষা করার জন্য ফায়ারফক্স "ইন্সপেক্ট এলিমেন্ট" টুল ব্যবহার করবেন

  2. ক্রোম ফ্ল্যাগ ব্যবহার করে গুগল ক্রোম ব্রাউজারে কীভাবে ইউআরএল কিউআর কোড জেনারেট করবেন?

  3. ম্যাকে Chrome, Safari এবং Firefox-এ উপাদান পরিদর্শন করার উপায়

  4. ইমেজ রিসাইজার টুল ব্যবহার করে ইমেজ ওরিয়েন্টেশন এবং স্কেল-আপ ইমেজ কিভাবে সামঞ্জস্য করা যায়