সিএসএস বোল্ড: ফন্ট-ওয়েট ব্যবহার করার গাইড

সিএসএস বোল্ড টেক্সট ইফেক্ট তৈরি করতে, আপনাকে অবশ্যই font-weight প্রপার্টি ব্যবহার করতে হবে। font-weight প্রপার্টি একটি ফন্টের "ওয়েট" বা ওজন নির্ধারণ করে, অর্থাৎ সেই ফন্ট কতটুকু বোল্ড দেখাবে। আপনি কীওয়ার্ড বা Нумериক ভ্যালু ব্যবহার করে সিএসএসকে নির্দেশ দিতে পারেন যে একটি টেক্সটের টুকরো কতটুকু বোল্ড হওয়া উচিত।

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

এই আর্টিকেলে, আমরা font-weight, কীভাবে এটি সেট করবেন এবং প্রপার্টির জন্য সম্ভাব্য বিভিন্ন ভ্যালুর একটি ইলাস্ট্রেশন দিব।

সিএসএস বোল্ড: একটি গাইড

font-weight প্রপার্টি সেট করে টেক্সট কতটুকু বোল্ড होकर স্ক্রিনে প্রদর্শিত হবে। আপনি কীওয়ার্ড বা একটি নümerিক ভ্যালু ব্যবহার করে সিএসএসকে নির্দেশ দিতে পারেন যে একটি নির্দিষ্ট টেক্সট সেট কতটুকু বোল্ড প্রদর্শিত হওয়া উচিত।

সিএসএস font-weight প্রপার্টির সিন্ট্যাক্স নিচের মতো:

font-weight: weightOfFont;

weightOfFont এর মান হলো আপনি যে ফন্ট ওয়েটটি সেই এলিমেন্টের জন্য ব্যবহার করতে চান যেটির সাথে স্টাইলটি প্রয়োগ করা হচ্ছে।

font-weight প্রপার্টি কিছু ভিন্ন ভ্যালু গ্রহণ করে, আপনি কোন ফন্ট ওয়েট একটি নির্দিষ্ট এলিমেন্টের জন্য সেট করতে চান তার উপর নির্ভর করে।

সিএসএস বোল্ড স্কেল

আপনার font-family-কে একটি স্কেল হিসেবে ভাবুন ১০০-১০০০ পর্যন্ত বোল্ডনেস স্কেলে। সংখ্যা যত বেশি, ফন্ট তত বেশি বোল্ড।

আপনার পছন্দের font-family-র”上 কিছু রিসার্চ করুন। এটি আপনাকে নিশ্চিত করবে যে ফলাফল আপনার সাইটে যত হালকা বা যত বোল্ড আপনি চান ততটুকু হবে। কিছু font-family পুরো স্কেল ব্যবহার করে না।

নিচের কোডটি দেখায় একটি জনপ্রিয় ফন্ট যাকে 'Arial' বলা হয়, সেটি কত হালকা এবং কত গাঢ় হতে পারে, নম্বর এবং কীওয়ার্ড উভয় ব্যবহার করে:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> body { font-family: 'Arial'; font-size: 3rem; } span { font-size: 1.5rem; } p:nth-child(1) { font-weight: normal; } p:nth-child(2) { font-weight: bold; } p:nth-child(3) span { font-weight: bolder; } p:nth-child(4) span { font-weight: lighter; } p:nth-child(5) { font-weight: 100; } p:nth-child(6) { font-weight: 200; } p:nth-child(7) { font-weight: 300; } p:nth-child(8) { font-weight: 400; } p:nth-child(9) { font-weight: 500; } p:nth-child(10) { font-weight: 600; } p:nth-child(11) { font-weight: 700; } p:nth-child(12) { font-weight: 800; } p:nth-child(13) { font-weight: 900; } </style> </head> <body> <p>Hello World! <span>-- Normal</span></p> <p>Hello World! <span>-- Bold</span></p> <p>Hello World! <span>-- Bolder <br> &nbsp; &nbsp; &nbsp; &nbsp; -- child is bolder than parent </span></p> <p>Hello World! <span>-- Lighter <br> &nbsp; &nbsp; &nbsp; &nbsp; -- child is lighter than parent </span> </p> <p>Hello World! <span>-- 100</span></p> <p>Hello World! <span>-- 200</span></p> <p>Hello World! <span>-- 300</span></p> <p>Hello World! <span>-- 400 'normal'</span></p> <p>Hello World! <span>-- 500</span></p> <p>Hello World! <span>-- 600</span></p> <p>Hello World! <span>-- 700 'bold'</span></p> <p>Hello World! <span>-- 800</span></p> <p>Hello World! <span>-- 900</span></p> </body> </html>

Lighter এবং Bolder: এগুলো আসলে কী বোঝায়? 

এখানে নির্দেশ করার رئيسية বিষয়টি হলো lighter এবং bolder শাব্দিক অনুবাদ নয়। Bolder এখানে "বোল্ড থেকে আরও বোল্ড" বোঝায় না।

Bolder এবং lighter আসলে এই প্রসঙ্গে, মানে তাদের প্যারেন্ট এলিমেন্টের সাথে সম্পর্কে কত বোল্ড বা কত হালকা। তাই যখন আমরা একটি চাইল্ড এলিমেন্টকে bolder করি, সেটি তার প্যারেন্টের চেয়ে একটি রিলেটিভ ফন্ট-ওয়েট বেশি গাঢ় হবে—lighter-এর জন্যও একই কথা।

রিলেটিভ ফন্ট-ওয়েটগুলো নিচের মতো: 

সুতরাং, আমরা font-weight: bold প্রপার্টি ব্যবহার করে একটি প্যারাগ্রাফ টেক্সটের ফন্ট-ওয়েট ৮০০ সেট করতে পারি। যখন একটি চাইল্ড একটি রিলেটিভ ওয়েট বোল্ডার তার প্যারেন্টের চেয়ে, তবে সেটি উপরের টেবিলটি ব্যবহার করে বুঝতে পারবে কত বোল্ড করবে।

উদাহরণস্বরূপ, বলুন আমার একটি চাইল্ড রয়েছে যার প্যারেন্টের ফন্ট-ওয়েট ৪০০। আমি যদি চাইল্ড-এ font-weight: bolder সেট করি, তবে চাইল্ড-এ ফন্ট-ওয়েট ৭০০ হয়ে যাবে।

এটি কারণ চাইল্ডটি প্যারেন্টের চেয়ে এক রিলেটিভ ফন্ট-ওয়েট বেশি গাঢ়। যদি প্যারেন্ট ইতিমধ্যে যত গাঢ় বা যত হালকা হতে পারে তত হয়ে থাকে, তবে সেই প্রপার্টি ভ্যালুগুলো কিছুই করবে না।

সিএসএস ফন্ট ওয়েট উদাহরণ

মান লেইয়া আমরা The Seattle Stamp Club-এর জন্য একটি ওয়েবসাইট ডিজাইন করছি, একটি লোকাল স্ট্যাম্প সোসাইটি। স্ট্যাম্প সোসাইটি আমাদের অনুরোধ করেছে তাদের ওয়েবসাইটের About পেজের About Us হেডিংটি বোল্ড করে দেখাতে। এটি ভিজিটারের মনোযোগ হেডিং-এ আকর্ষণ করবে।

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

আমরা নিচের কোড ব্যবহার করে এই টেক্সট ব্লকটি তৈরি করতে পারি, নির্দিষ্ট ফ্রেজগুলো বোল্ড করে:

<html> <p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p> <style> span { font-weight: bolder; }

উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।

আমাদের এইচটিএমএল ফাইলে, আমরা একটি প্যারাগ্রাফ টেক্সট ডিফাইন করেছি <p> ট্যাগের ভিতরে। আমরা নির্দিষ্ট কিছু ফ্রেজকে <span> ট্যাগের ভিতরে এনক্লোজ করেছি, যেগুলো আমরা আমাদের সিএসএস কোডে বোল্ড করব।

এরপর, আমাদের সিএসএস ফাইলে, আমরা একটি স্টাইল রুল ডিফাইন করেছি যা সেট করে প্রতিটি <span> ট্যাগের ফন্ট স্টাইল ওয়েটকে bolder। এর মানে যে কোনো <span> ট্যাগের ভিতরে এনক্লোজ করা টেক্সট প্যারেন্ট এলিমেন্টের চেয়ে বোল্ডרא দেখাবে।

আমাদের কোড রান করালে, আমাদের প্যারাগ্রাফ নরম্যাল ফন্ট-ওয়েটে প্রদর্শিত হবে, এবং <span> ট্যাগের ভিতরে এনক্লোজ করা ফ্রেজগুলো বোল্ডে প্রদর্শিত হবে। এই উদাহরণে, welcomes all এবং 250 members ফ্রেজগুলো <span> ট্যাগে এনক্লোজ করা আছে।

ভেরিয়েবল ফন্টসহ বোল্ড টেক্সট সিএসএস

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

উপসংহার

এই টিউটোরিয়ালে, আমরা সিএসএস font-weight প্রপার্টি এবং এটি কীভাবে আমাদের ফন্ট কতটুকু বোল্ড হবে সেটি প্রভাবিত করে সে সম্পর্কে আলোচনা করেছি।

আমরা শিখেছি যে bolder এবং lighter মানে প্যারেন্ট এলিমেন্টের ফন্ট-ওয়েট থেকে এক রিলেটিভ ফন্ট-ওয়েট দূরে। প্র্যাকটিসে, আমরা ফন্ট-ওয়েটের একটি রেঞ্জ দেখেছি কীভাবে টেক্সটটি দেখে। আপনি font-weight দিয়ে ফন্ট স্টাইল করার প্রো হয়ে যাবেন খুব দ্রুত!

সিএসএস-এ কোডিং সম্পর্কে আরও জানতে, সিএসএস কীভাবে শিখবেন সেটি নিয়ে আমাদের গাইড পড়ুন। আপনি সিএসএস-এ নির্ভর না করে আপনার টেক্সট বোল্ড করার পদ্ধতি জানতে চাইলে HTML-এ বোল্ড টেক্সট করার গাইড পড়তে পারেন।