ফন্টলেন্স

যেকোনো টেক্সট সিলেক্ট করে রাইট-ক্লিক করলেই তার ফন্ট, সাইজ, ওয়েট, রঙ ও CSS দেখুন। কপি, পরিবর্তন, প্রিভিউ আর ডাউনলোড করুন।

কখনো কি কোনো পেজে গিয়ে তার অক্ষরগুলো দেখে মুগ্ধ হয়েছেন এবং ভেবেছেন "এটা কোন ফন্ট?" ফন্টলেন্স এক ক্লিকেই সেই প্রশ্নের উত্তর দেয়। যেকোনো ওয়েবসাইটে যেকোনো টেক্সট সিলেক্ট করুন, রাইট-ক্লিক করুন, এবং "ফন্টলেন্স দিয়ে ফন্ট পরিদর্শন করুন" অপশনটি বেছে নিন। একটি পরিষ্কার, ফোকাসড প্যানেল সরাসরি পেজের উপরে খুলে যাবে এবং সেই টেক্সটটি কীভাবে স্টাইল করা হয়েছে তা হুবহু প্রকাশ করবে: টাইপফেস, তার আকার, ওজন, লাইন হাইট, রঙ এবং ডিজাইনের পেছনের সমস্ত খুঁটিনাটি। আপনি একজন ডিজাইনার হোন যিনি লেআউট রিভার্স-ইঞ্জিনিয়ারিং করছেন, একজন ডেভেলপার যিনি স্পেসিফিকেশন মেলাচ্ছেন, অথবা শুধুমাত্র একটি সুন্দর হেডলাইন সম্পর্কে কৌতূহলী, এই টুলটি যেকোনো ওয়েব পেজকে টাইপোগ্রাফির একটি খোলা বইতে পরিণত করে। ফন্টলেন্স একটি ফন্ট ফাইন্ডার এবং সিএসএস ইন্সপেক্টর, দুটোই একসাথে। এটি শুধু আপনার জন্য ফন্ট-ফ্যামিলির নাম বলে দেয় না, এটি আপনাকে ব্যবহারের জন্য প্রস্তুত কোড, আইডিয়া পরীক্ষা করার জন্য একটি ইন্টারেক্টিভ প্লেগ্রাউন্ড, এবং আপনার টেক্সটটি পাঠযোগ্য কিনা তা নিশ্চিত করার জন্য অ্যাক্সেসিবিলিটি টুল সরবরাহ করে। কোনো অ্যাকাউন্ট নয়। কোনো সাইনআপ নয়। শুধু সিলেক্ট করুন, রাইট-ক্লিক করুন, এবং পরীক্ষা করুন। 🔍 আপনি যা যা করতে পারেন - যেকোনো নির্বাচিত শব্দের সম্পূর্ণ টাইপোগ্রাফি দেখুন: এক নজরে ফন্ট-ফ্যামিলি, ফন্ট-সাইজ, ফন্ট-ওয়েট, লাইন-হাইট এবং রঙ - অতিরিক্ত স্টাইলিং দেখুন যা সহজে চোখ এড়িয়ে যায়, যেমন লেটার-স্পেসিং, টেক্সট-ট্রান্সফর্ম, এবং ফন্ট-স্টাইল - এক ক্লিকে যেকোনো একটি প্রোপার্টি কপি করুন, অথবা সম্পূর্ণ নিয়মাবলী একটি পূর্ণ সিএসএস স্নিপেট হিসেবে নিন - সেই স্নিপেটটিকে সহজ ট্যাবের মাধ্যমে টেলউইন্ড, এসসিএসএস বা স্যাস-এ রূপান্তর করুন, তারপর পুরোটা বা লাইন-বাই-লাইন কপি করুন - একটি লাইভ, সম্পাদনাযোগ্য প্রিভিউতে পরীক্ষা করুন: স্যাম্পল শব্দগুলো পুনরায় লিখুন, মান পরিবর্তন করুন, ব্যাকগ্রাউন্ড বদলান, এবং দেখুন কীভাবে তা সঙ্গে সঙ্গে আপডেট হয় - একটি ওয়েব ফন্ট কোথা থেকে এসেছে তা প্রোভাইডার ব্যাজ দিয়ে শনাক্ত করুন (গুগল ফন্টস, অ্যাডোবি ফন্টস, সেলফ-হোস্টেড, বা বিল্ট-ইন সিস্টেম টাইপফেস) - "ফন্ট ডাউনলোড করুন" বোতাম দিয়ে আপনার কম্পিউটারে একটি ওয়েব ফন্ট সেভ করুন, যা সরাসরি তার নিজস্ব উৎস থেকে নেওয়া - WCAG স্ট্যান্ডার্ড অনুযায়ী রঙের কনট্রাস্ট পরীক্ষা করুন, সঠিক অনুপাতসহ AA এবং AAA পাস বা ফেইল ফলাফল দেখুন - একটি সম্পূর্ণ পিকার দিয়ে রঙ বাছাই ও স্যাম্পল করুন, যার মধ্যে স্ক্রিনের যেকোনো পিক্সেল ধরার জন্য একটি আইড্রপারও রয়েছে - পরিমাপের একক px, rem, pt, এবং em-এর মধ্যে পরিবর্তন করুন, যা ফিল্ড এবং এক্সপোর্ট করা কোড উভয় ক্ষেত্রেই প্রযোজ্য হবে 🖱️ এটি কীভাবে কাজ করে ফন্টলেন্স ব্যবহার করতে কয়েক সেকেন্ড সময় লাগে। যে শব্দগুলো আপনি দেখতে চান তা হাইলাইট করুন, সিলেকশনের উপর রাইট-ক্লিক করুন, এবং মেনু থেকে "ফন্টলেন্স দিয়ে ফন্ট পরিদর্শন করুন" বেছে নিন। প্যানেলটি বর্তমান পেজের উপরে দেখা যাবে, এমনভাবে স্টাইল করা যা সাইটের নিজস্ব চেহারার সাথে কখনো冲突 করে না। সেখান থেকে আপনি বিবরণ পড়তে পারেন, যা প্রয়োজন তা কপি করতে পারেন, অথবা সম্পাদনা শুরু করতে পারেন। লাইভ প্রিভিউ হলো আসল মজার জায়গা। একটি আসল হেডলাইন পরীক্ষা করার জন্য শব্দ পরিবর্তন করুন, আকার সামান্য বাড়ান, ওজন সামঞ্জস্য করুন, বা টাইপটি কেমন দেখায় তা দেখতে একটি নতুন ব্যাকগ্রাউন্ড রঙ সেট করুন। আপনি বিভিন্ন পেজে যাওয়ার সময় এবং পরে ফিরে আসার সময় আপনার সম্পাদনাগুলো থেকে যায়, তাই এক সাইটে শুরু করা একটি আইডিয়া পরের সাইটে আপনার জন্য অপেক্ষা করবে। যখন আপনি আসল মানগুলো ফিরে পেতে চান, তখন "সাইটে রিসেট করুন" বোতামটি পেজের ব্যবহৃত সবকিছু পুনরুদ্ধার করে। কাঁচা অ্যাসেট প্রয়োজন? ডাউনলোডযোগ্য ওয়েব ফন্টের জন্য, একটি বোতাম তার @font-face অবস্থান থেকে আসল ফাইলটি নিয়ে আসে। যে টাইপফেসটি ইতিমধ্যে আপনার অপারেটিং সিস্টেমের সাথে আসে, তার জন্য ফন্টলেন্স আপনাকে বলে দেবে যে এটি একটি বিল্ট-ইন ফন্ট, তাই আপনি জানবেন যে এটি কোনো ডাউনলোড ছাড়াই উপলব্ধ। 🔒 গোপনীয়তা প্রথম ফন্টলেন্স সম্পূর্ণভাবে আপনার ব্রাউজারের মধ্যে চলে। এখানে কোনো ডেটা সংগ্রহ, ট্র্যাকিং, অ্যানালিটিক্স এবং টেক্সট পরিদর্শনের জন্য কোনো বাহ্যিক সার্ভার জড়িত নেই। আপনি যা কিছু পরীক্ষা করেন তা আপনার মেশিনেই থাকে। এক্সটেনশনটি শুধুমাত্র একটি নেটওয়ার্ক অনুরোধ করে, এবং তাও কেবল যখন আপনি ইচ্ছাকৃতভাবে "ফন্ট ডাউনলোড করুন" বোতামটি চাপেন, তখন এটি ফন্টের নিজস্ব উৎস থেকে ফাইলটি পুনরুদ্ধার করার জন্য যোগাযোগ করে। আপনার ডিভাইস থেকে আর কিছুই বাইরে যায় না। অনুমতিগুলো ইচ্ছাকৃতভাবে সীমিত রাখা হয়েছে। কনটেক্সট-মেনু অনুমতিটি রাইট-ক্লিক এন্ট্রি যোগ করে। অ্যাক্টিভ-ট্যাব অনুমতিটি টুলটিকে সেই ট্যাবে আপনার নির্বাচিত টেক্সট পড়তে দেয় যেখানে আপনি এটি ব্যবহার করছেন, এবং অন্য কোথাও নয়। স্টোরেজ আপনার প্রিভিউ টেক্সট এবং আপনার ইউনিট ও ফরম্যাট পছন্দগুলো মনে রাখে যাতে পরের বার সেগুলো মনে থাকে। আপনার ব্রাউজিং ইতিহাসে কোনো ব্যাপক অ্যাক্সেস এবং কোনো হোস্ট অনুমতি নেই। 👥 এটি কাদের জন্য - ওয়েব ডিজাইনার যারা একটি টাইপফেস শনাক্ত করতে, একটি প্যালেট ধরতে এবং দ্রুত স্টাইলগুলো পুনরায় ব্যবহার করতে চান - ফ্রন্ট-এন্ড ডেভেলপার যারা একটি মকআপ মেলাচ্ছেন বা সঠিক ফন্ট-ফ্যামিলি এবং স্পেসিং মান কোডে ব্যবহার করতে চান - ইউআই এবং ইউএক্স ইঞ্জিনিয়ার যারা সামঞ্জস্যপূর্ণ, অন-ব্র্যান্ড টাইপ সিস্টেম তৈরি করছেন - ছাত্রছাত্রী যারা সিএসএস এবং টাইপোগ্রাফি শিখছে এবং দেখতে চায় বাস্তব সাইটগুলো কীভাবে তৈরি হয় - অ্যাক্সেসিবিলিটি অডিটর যারা শিপিংয়ের আগে টেক্সট WCAG কনট্রাস্ট প্রয়োজনীয়তা পূরণ করে কিনা তা যাচাই করেন - ব্লগার, মার্কেটার এবং কৌতূহলী পাঠক যারা শুধু জানতে চান একটি সাইট কোন ফন্ট ব্যবহার করছে ✨ কেন মানুষ এটি ব্যবহার করে - ডেভেলপার টুলে খোঁজাখুঁজি না করে এক রাইট-ক্লিকেই উত্তর পেয়ে যান - কোডটি প্লেইন সিএসএস, টেলউইন্ড, এসসিএসএস বা স্যাস-এ কপি করার জন্য প্রস্তুত, তাই এটি সরাসরি আপনার প্রজেক্টে ব্যবহার করা যায় - সম্পাদনাযোগ্য প্রিভিউ আপনাকে এক লাইন কোড না লিখেও টাইপের পছন্দগুলো প্রোটোটাইপ করতে দেয় - কনট্রাস্ট চেকার অ্যাক্সেসিবিলিটিকে আপনার ওয়ার্কফ্লো-এর একটি অংশ করে তোলে, এটিকে পরে ভাবার বিষয় হিসেবে ছেড়ে না দিয়ে - কালার পিকার এবং আইড্রপার দিয়ে আপনি পেজের যেকোনো জায়গা থেকে সঠিক রঙ স্যাম্পল এবং পুনরায় ব্যবহার করতে পারেন - লাইট এবং ডার্ক থিম স্বয়ংক্রিয়ভাবে আপনার অপারেটিং সিস্টেমকে অনুসরণ করে, তাই এটি দিন বা রাতে স্বাচ্ছন্দ্য বোধ করায় - px, rem, pt, এবং em-এর মধ্যে ইউনিট পরিবর্তন আপনার কোডবেস যেভাবে লেখা হয়েছে তার সাথে আউটপুটকে সামঞ্জস্যপূর্ণ রাখে 🎨 বিস্তারিত তথ্যগুলির একটি গভীর পর্যবেক্ষণ টাইপোগ্রাফি শুধু একটি নামের চেয়েও বেশি কিছু। ফন্টলেন্স সেই ছোট ছোট সিদ্ধান্তগুলো তুলে ধরে যা টেক্সটকে সঠিক অনুভূতি দেয়, যেমন একটি হেডিংয়ের ওজন থেকে শুরু করে লাইন-হাইটের শ্বাস ফেলার জায়গা এবং লেটার-স্পেসিংয়ের সূক্ষ্ম ট্র্যাকিং। এই মানগুলো পাশাপাশি দেখলে আপনি বুঝতে পারবেন কেন একটি ডিজাইন কাজ করে এবং কীভাবে এটি পুনরায় তৈরি করা যায়। প্রোভাইডার ব্যাজটিও প্রসঙ্গ যোগ করে, এক নজরে আপনাকে বলে দেয় যে আপনি একটি গুগল ফন্টস অ্যাসেট, একটি অ্যাডোবি ফন্টস ফেস, একটি সেলফ-হোস্টেড ফাইল, বা একটি সিস্টেম ডিফল্ট দেখছেন কিনা, যা প্রায়শই একটি টাইপফেস মেলানো বা উৎস খোঁজার প্রথম সূত্র হয়। রঙের টুলগুলো একটি স্থির রিডআউটের বাইরেও কাজ করে। পিকারটি হিউ এবং আলফা স্লাইডার সহ একটি HSV স্কোয়ার অফার করে এবং এটি HEX, RGB, ও HSL ফরম্যাটে কাজ করে যাতে আপনি আপনার সুবিধামতো ফরম্যাটে কাজ করতে পারেন। এর সাথে আইড্রপার ব্যবহার করে আপনি যেকোনো এলিমেন্টের সঠিক শেড তুলে নিতে পারেন এবং আপনার প্রিভিউ বা নোটগুলিতে তা ব্যবহার করতে পারেন। 🚀 পরিদর্শন শুরু করুন ফন্টলেন্স যোগ করুন, কিছু শব্দ হাইলাইট করুন, এবং যেকোনো পেজের পেছনের টাইপোগ্রাফি, স্টাইল এবং রঙগুলো দেখতে রাইট-ক্লিক করুন। যারা ওয়েব কীভাবে পড়া হয় সে সম্পর্কে যত্নশীল, তাদের জন্য এটি একটি দ্রুত, ব্যক্তিগত এবং সত্যিই দরকারী সহযোগী। এটি ইনস্টল করুন, হাতের কাছে রাখুন এবং আর কখনো কোনো অজানা ফন্ট নিয়ে ভাবতে হবে না।