একটি CSS বোল্ড টেক্সট প্রভাব তৈরি করতে, আপনাকে অবশ্যই ফন্ট-ওয়েট বৈশিষ্ট্য ব্যবহার করতে হবে। ফন্ট-ওজন বৈশিষ্ট্য একটি ফন্টের "ওজন" নির্ধারণ করে বা সেই ফন্টটি কতটা গাঢ় হবে তা নির্ধারণ করে। পাঠ্যের একটি অংশ কতটা বোল্ড হওয়া উচিত তা সিএসএসকে নির্দেশ দিতে আপনি কীওয়ার্ড বা সংখ্যাসূচক মান ব্যবহার করতে পারেন।
বিকাশকারী হিসাবে, একটি ওয়েবসাইট লেআউট করতে গিয়ে, কখনও কখনও আমরা কোনও কিছুর প্রতি দৃষ্টি আকর্ষণ করতে চাই। আমরা এটা করতে পারি উপায় একটি সংখ্যা আছে. সবচেয়ে মৌলিক উপায় হল ফন্ট-ওজন বাড়ানো আপনি যে টেক্সট হাইলাইট করতে চান। এটি টেক্সটকে উৎসাহিত করে দেখানোকে বোঝায়।
এই নিবন্ধে, আমরা ফন্ট-ওয়েট সম্পর্কে কথা বলব, কীভাবে এটি সেট করতে হয় এবং সম্পত্তির জন্য বিভিন্ন সম্ভাব্য মানগুলির একটি চিত্র তুলে ধরব৷
সিএসএস বোল্ড:একটি নির্দেশিকা
ফন্ট-ওয়েট প্রপার্টি সেট করে যে কীভাবে বোল্ড টেক্সট স্ক্রিনে প্রদর্শিত হবে। একটি নির্দিষ্ট সেটের টেক্সট কতটা বোল্ড হওয়া উচিত সে সম্পর্কে সিএসএসকে নির্দেশ দিতে আপনি কীওয়ার্ড বা একটি সংখ্যাসূচক মান ব্যবহার করতে পারেন।
CSS ফন্ট-ওয়েট সম্পত্তির সিনট্যাক্স নিম্নরূপ:
font-weight: weightOfFont;
WeightOfFont-এর মান হল সেই ফন্টের ওজন যা আপনি যে উপাদানটিতে শৈলী প্রয়োগ করতে চান তার জন্য ব্যবহার করতে চান।
আপনি একটি নির্দিষ্ট উপাদানের জন্য যে ফন্ট-ওজন সেট করতে চান তার উপর নির্ভর করে ফন্ট-ওজন বৈশিষ্ট্য কয়েকটি ভিন্ন মান গ্রহণ করে।
CSS বোল্ড স্কেল
সাহসিকতার স্কেলে 100-1000 থেকে একটি স্কেল থাকার মত আপনার ফন্ট-পরিবারকে মনে করুন। সংখ্যা যত বেশি হবে, ফন্ট তত বেশি গাঢ় হবে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
আপনার পছন্দের ফন্ট-পরিবারে কিছু গবেষণা করুন। এটি আপনাকে নিশ্চিত হতে দেবে যে ফলাফলটি আপনার সাইটে যতটা চান তত হালকা বা সাহসী হবে। কিছু ফন্ট-পরিবার পুরো স্কেল ব্যবহার করে না।
নিম্নলিখিত কোডটি সংখ্যা এবং কীওয়ার্ড উভয় ব্যবহার করে '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>
-- child is bolder than parent
</span></p>
<p>Hello World! <span>-- Lighter
<br>
-- 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> হালকা এবং সাহসী:তারা আসলে কি মানে?
এখানে যে প্রধান জিনিসটি উল্লেখ করা প্রয়োজন তা হল হালকা এবং সাহসী একটি আক্ষরিক অনুবাদ নয়। এখানে সাহসী মানে "বোল্ডের চেয়ে সাহসী" নয়।
বোল্ডার এবং লাইটার আসলে বোঝায়, এই প্রসঙ্গে, তারা তাদের মূল উপাদানের সাথে কতটা সাহসী বা কতটা হালকা। তাই যখন আমরা একটি শিশুর উপাদানকে আরও সাহসী করে তুলি, তখন তারা তাদের পিতামাতার তুলনায় একটি আপেক্ষিক হরফ-ওজন গাঢ় হবে – একইভাবে হালকা হয়।
আপেক্ষিক হরফ-ওজন নিম্নরূপ:
| আপেক্ষিক ফন্ট-ওজন | প্রকৃত ফন্ট-ওজন |
| পাতলা | 100 |
| স্বাভাবিক | 400 |
| বোল্ড | 700 |
| ভারী | 900 |
সুতরাং, টেক্সটের একটি অনুচ্ছেদের ফন্ট-ওয়েট 800 এ সেট করতে আমরা ফন্ট-ওয়েট:বোল্ড প্রপার্টি ব্যবহার করতে পারি। যখন একটি শিশু তাদের পিতামাতার তুলনায় এক আপেক্ষিক ওজন বেশি বোল্ড হয়, তখন এটি কতটা সাহসী করা যায় তা নির্ধারণ করতে উপরের টেবিলটি ব্যবহার করে। এটা।
উদাহরণ স্বরূপ, বলুন আমার একটি সন্তান আছে যার পিতা-মাতার ফন্ট-ওজন 400। আমি যদি সন্তানের ফন্ট-ওয়েটের মানটিকে আরও সাহসী করে দেই, তাহলে সন্তানের ফন্ট-ওজন 700 হয়ে যায়।
এর কারণ হল শিশুটি পিতামাতার চেয়ে একটি আপেক্ষিক হরফ-ওজন গাঢ়। যদি অভিভাবক ইতিমধ্যে অন্ধকার বা যতটা আলো যেতে পারে, সেই সম্পত্তি মানগুলি কিছুই করবে না।
CSS ফন্টের ওজনের উদাহরণ
ধরুন আমরা সিয়াটেল স্ট্যাম্প ক্লাবের জন্য একটি ওয়েবসাইট ডিজাইন করছি, একটি স্থানীয় স্ট্যাম্প সোসাইটি। স্ট্যাম্প সোসাইটি আমাদের আমাদের সম্পর্কে তৈরি করতে বলেছে৷ সম্পর্কে শিরোনাম তাদের ওয়েবসাইটের পৃষ্ঠা মোটা অক্ষরে প্রদর্শিত হবে। এটি শিরোনামের প্রতি দর্শকের দৃষ্টি আকর্ষণ করবে৷
৷স্ট্যাম্প ক্লাব আমাদেরকে তাদের ওয়েবসাইটে ক্লাবের ইতিহাস সহ পাঠ্যের একটি ব্লক যুক্ত করতে বলেছে। পাঠ্যের এই ব্লকটি স্বাভাবিক ফন্ট-ওয়েটে উপস্থিত হওয়া উচিত। ক্লাব দর্শকের দৃষ্টি আকর্ষণ করতে চায় এমন কিছু বাক্যাংশ মোটা অক্ষরে দেখা উচিত।
আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি পাঠ্যের এই ব্লকটি তৈরি করতে, কিছু বাক্যাংশ সাহসী করে:
<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;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের HTML ফাইলে, আমরা
ট্যাগের মধ্যে টেক্সটের একটি অনুচ্ছেদ সংজ্ঞায়িত করেছি। আমরা ট্যাগের মধ্যে কিছু বাক্যাংশও সংযুক্ত করেছি, যেগুলোকে আমরা আমাদের CSS কোডে উৎসাহিত করতে যাচ্ছি।
এরপরে, আমাদের CSS ফাইলে, আমরা একটি স্টাইল নিয়ম সংজ্ঞায়িত করেছি যা প্রতিটি ট্যাগের ফন্ট স্টাইল ওজনকে বোল্ডার-এ সেট করে। . এর মানে হল যে কোনও ট্যাগের মধ্যে আবদ্ধ পাঠ্যটি মূল উপাদানের চেয়ে সাহসী দেখাবে।
যখন আমরা আমাদের কোড চালাই, তখন আমাদের অনুচ্ছেদ স্বাভাবিক ফন্ট-ওয়েট সহ প্রদর্শিত হয় এবং ট্যাগের মধ্যে আবদ্ধ বাক্যাংশগুলি মোটা অক্ষরে প্রদর্শিত হয়। এই উদাহরণে, বাক্যাংশগুলি সবকে স্বাগত জানায়৷ এবং 250 জন সদস্য ট্যাগে আবদ্ধ।
ভেরিয়েবল ফন্ট সহ বোল্ড টেক্সট CSS
CSS ফন্টের সর্বশেষ স্তরের মাধ্যমে আমাদের কাছে কিছু নতুন ফন্ট উপলব্ধ করা হয়েছে। এগুলিকে ভেরিয়েবল ফন্ট বলা হয় এবং যেকোন নিতে পারে হরফ-ওজন হিসাবে 1 এবং 1000 এর মধ্যে সংখ্যা। ব্রাউজার সমর্থন মে 2020 পর্যন্ত সম্পূর্ণরূপে প্রয়োগ করা হয়নি, তাই তারা মোটামুটি নতুন। আপনি যদি পরিবর্তনশীল ফন্ট সম্পর্কে আরও তথ্য চান তবে এই ভূমিকাটি দেখুন।
উপসংহার
এই টিউটোরিয়ালে, আমরা CSS ফন্ট-ওয়েট প্রপার্টি নিয়ে আলোচনা করেছি এবং কীভাবে এটি আমাদের ফন্টগুলি কতটা সাহসী তা প্রভাবিত করে।
আমরা শিখেছি যে সাহসী এবং হালকা মানে একটি আপেক্ষিক ফন্ট-ওজন মূল উপাদানের ফন্ট-ওয়েট থেকে দূরে। অনুশীলনে, আমরা পাঠ্যটি কেমন তা দেখতে ফন্ট-ওয়েটের একটি পরিসর দেখেছি। আপনি ফন্ট-ওয়েট সহ ফন্ট স্টাইল করার পেশাদার হয়ে উঠবেন!
CSS-এ কোডিং সম্পর্কে আরও জানতে, কীভাবে CSS শিখতে হয় সে সম্পর্কে আমাদের গাইড পড়ুন। আপনি যদি CSS-এর উপর নির্ভর না করে আপনার পাঠ্যকে বোল্ড করতে চান তাহলে HTML-এ কীভাবে বোল্ড টেক্সট করা যায় সে সম্পর্কে আমাদের গাইড পড়তে পারেন।
