সিএসএস ফন্ট
টেক্সটের জন্য ফন্ট ফ্যামিলি, গাঢ়ত্ব, সাইজ এবং স্টাইল নির্ধারণ করতে সিএসএস font প্রোপার্টি ব্যবহার করা হয়।
Serif এবং Sans-serif ফন্টের মধ্যে পার্থক্যঃ
এক নজরে সিএসএস ফন্ট প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো ফন্ট প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।
টেক্সটের ফন্ট সাইজ সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্ট ফ্যামিলি সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্ট স্টাইল সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা তা নির্ধারণ করে।
ফন্টকে গাঢ় বা হালকাভাবে উপস্থাপন করে।
সিএসএস ফন্ট ফ্যামিলি
সিএসএসের মধ্যে দুই ধরনের ফন্ট ফ্যামিলি রয়েছেঃ
- generic family - দেখতে প্রায় একইরকম ফন্ট ফ্যামিলির একটি গ্রুপ। যেমন-
"Serif","Monospace"ইত্যাদি। - font family - একটি নির্দিষ্ট ফন্ট ফ্যামিলি যেমনঃ
"Times New Roman","Arial"ইত্যাদি।
বিঃদ্রঃ কম্পিঊটারের স্ক্রিনে serif ফন্টের চেয়ে sans-serif ফন্ট খুব সহজে পড়া যায়
ফন্ট ফ্যামিলি
font-family প্রোপার্টির মাধ্যমে টেক্সটের ফন্ট ফ্যামিলি সেট করা হয়।
font-family প্রোপার্টিতে "fallback" সিস্টেম হিসাবে বিভিন্ন ফন্ট এর নাম রাখা উচিত। যদি কোন ব্রাউজারে প্রথম ফন্টটি সাপোর্ট না করে, তাহলে তা পরবর্তী ফন্টের জন্য চেষ্টা করে এবং এভাবে চলতে থাকে।
আপনার পছন্দ অনুযায়ী ফন্টের নাম দিয়ে শুরু করুন এবং generic family দ্বারা শেষ করুন। কারণ যদি অন্য কোন ফন্ট না কাজ করে তাহলে ব্রাউজার তার মত করে generic family'র মধ্য থেকে একই ধরণের ফন্ট বাছাই করে নিবে।
বিঃদ্রঃ যদি কোনো ফন্ট ফ্যামিলির নাম এক শব্দের চেয়ে বেশি হয় তাহলে এটাকে অবশ্যই কোটেশন মার্ক(" ") এর মধ্যে রাখতে হবে। যেমনঃ "Times New Roman"
একের অধিক ফন্ট ফ্যামিলি থাকলে কমা(,) দ্বারা সেগুলোকে আলাদা করতে হবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.paragraph1 {
font-family: "Times New Roman", Times, serif;
}
p.paragraph2 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font familly</h1>
<p class="paragraph1">We sets "Times New Roman" font for this paragraph.</p>
<p class="paragraph2">We sets "Arial" font for this paragraph.</p>
</body>
</html>
ফলাফল
সচরাচর ব্যবহৃত ফন্টসমূহ সম্বন্ধে জানতে আমাদের ওয়েব সেফ ফন্টের সমাহার পেজটি ভিজিট করুন।
font-style প্রোপার্টি
অধিকাংশ ক্ষেত্রেই ফন্টসমূহকে হালকা বাঁকাভাবে(italic) উপস্থাপন করার জন্য font-style প্রোপার্টিটি ব্যবহার করা হয়।
এই প্রোপার্টিতে ৩টি ভ্যালু ব্যবহার করা যায়ঃ
normal- টেক্সটকে সাধারণভাবে দেখানো হয়।italic- টেক্সটকে ইটালিক স্টাইলে দেখানো হয়।oblique- এটি italic এর মত টেক্সটকে বাঁকা করে। কিনতু ইটালিকের তুলনায় ইহা কম সমর্থিত।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>font-style প্রোপার্টির ব্যবহার</h1>
<p class="normal">এই প্যারাগ্রাফটিতে নরমাল স্টাইল সেট করা হয়েছে।</p>
<p class="italic">এই প্যারাগ্রাফটিতে ইটালিক্ স্টাইল সেট করা হয়েছে।</p>
<p class="oblique">এই প্যারাগ্রাফটিতে oblique স্টাইল সেট করা হয়েছে।</p>
</body>
</html>
ফলাফল
font-size প্রোপার্টি
টেক্সটের সাইজ নির্ধারণ করার জন্য font-size প্রোপার্টি ব্যবহার করা হয়।
ওয়েব ডিজাইনিং এর ক্ষেত্রে টেক্সটের আকার(size) নির্ধারণ করা খুবই গুরুত্বপূর্ণ। যাইহোক, font-size প্রোপার্টি ব্যবহার করে প্যারাগ্রাফকে হেডিং এর সাইজে অথবা হেডিং কে প্যারাগ্রাফের সাইজে করা মোটেও উচিত হবে না।
সবসময় প্রয়োজন অনুযায়ী উপযুক্ত এইচটিএমএল ট্যাগ ব্যবহার করা উচিত। যেমন- হেডিং এর জন্য <h1> থেকে <h6> ট্যাগ এবং প্যারাগ্রাফ এর জন্য <p> ট্যাগ ব্যবহার করা উচিত।
font-size প্রোপার্টির ভ্যালু absolute অথবা relative হতে পারে।
বিঃদ্রঃ আপনি যদি ফন্টের সাইজ না সেট করে দেন, তাহলে ব্রাউজার থেকে ডিফল্টভাবে সাইজ নিয়ে নিবে।
যেমন- প্যারাগ্রাফ এর জন্য ডিফল্ট সাইজ হলো 16px (16px = 1em)।
Px এককে ফন্ট সাইজ নির্ধারণ
Px একক ব্যবহার করে আপনি আপনার ইচ্ছা মত টেক্সট এর আকার নির্ধারণ করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h4 {
font-size: 30px;
color: green;
}
p.first {
font-size: 20px;
}
p.last {
font-size: 10px;
}
</style>
</head>
<body>
<h4>font-size প্রোপার্টির মাধ্যমে এই শিরোনামটির টেক্সটের সাইজ 30px নির্ধারণ করা হয়েছে।</h4>
<p class="first">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 20px নির্ধারণ করা হয়েছে।</p>
<p class="last">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 10px নির্ধারণ করা হয়েছে।</p>
</body>
</html>
ফলাফল
Em এককে ফন্ট সাইজ নির্ধারণ
একজন ইউজারকে ব্রাউজার মেনু থেকে টেক্সট রিসাইজ(resize) করতে দেওয়ার জন্য অনেক ডেভেলপারই px এর পরিবর্তে em একক ব্যবহার করেন।
ফন্টের সাইজ নির্ধারণে em একক W3C সমর্থিত।
একটি ব্রাউজারের চলমান ফন্ট সাইজ হলো 1em এর সমান এবং ব্রাউজারের ডিফল্ট টেক্সট সাইজ হল 16px। সুতরাং 1em এর ডিফল্ট সাইজ = 16px।
পিক্সেলকে em এ কনভার্টের জন্য pixels/16 =em ফর্মূলা ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h4 {
font-size: 2em;
color: green;
}
p.first {
font-size: 1.5em;
}
p.last {
font-size: .875em;
}
</style>
</head>
<body>
<h4>font-size প্রোপার্টির মাধ্যমে এই শিরোনামটির টেক্সটের সাইজ 2em নির্ধারণ করা হয়েছে।</h4>
<p class="first">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 1.5em নির্ধারণ করা হয়েছে।</p>
<p class="last">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ .875em নির্ধারণ করা হয়েছে।</p>
</body>
</html>
ফলাফল
font-weight প্রোপার্টি
ফন্ট গাঢ় বা হালকা করার জন্য font-weight প্রোপার্টি ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>;
<title>সিএসএস উদাহরণ</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h2>font-weight প্রোপার্টির ব্যবহার</h2>
<p class="normal">font-weight(normal) প্রোপার্টির ব্যবহার</p>
<p class="lighter">font-weight(lighter) প্রোপার্টির ব্যবহার</p>
<p class="thick">font-weight(thick) প্রোপার্টির ব্যবহার</p>
<p class="thicker">font-weight(thicker) প্রোপার্টির ব্যবহার</p>
</body>
</html>
ফলাফল
font-variant প্রোপার্টি
টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা font-variant প্রোপার্টির মাধ্যমে তা নির্ধারণ করা হয়।
small-caps ফন্টে সকল ছোট অক্ষরের বর্ণ গুলো বড় অক্ষরের বর্ণে রুপান্তরিত হয়। রুপান্তরিত বড় অক্ষরের বর্ণগুলো প্রকৃত সাইজের চেয়ে ছোট হয়ে বড় অক্ষর হিসাবে ব্রাউজারে প্রদর্শিত হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.paragraph1 {
font-variant: normal;
}
p.paragraph2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="paragraph1">This is a paragraph with normal font variant.</p>
<p class="paragraph2">This is a paragraph with small-caps font variant.</p>
</body>
</html>
ফলাফল