ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে টেক্সট, টেক্সট কালার, টেক্সট ডেকরেশন, টেক্সট ট্রান্সফরমেশন নিয়ে আলোচনা করেছিলাম। আজ তোমাদের ফন্ট নিয়ে আলোচনা করা হলো :
ফন্ট (Font) :
ফন্ট ফ্যামিলি (Font family) :
ফন্ট সাইজ(Font size) :
টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ কেমন হবে, তা নির্দেশ করার জন্য ফন্ট সাইজ ব্যবহার করা হয়। টেক্সট সমূহের জন্য 25px এর ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:25px; অনুরূপভাবে 20px ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:20px;। টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ পিক্সেলে বা px এ না দিয়ে শতকরা হিসেবেও দেযা যেতে পারে, এক্ষেত্রে Declaration করতে হবে font-size:100% এর অনুরূপ। টেক্সট সমূহের ফন্ট সাইজ Declaration এর আরো বেশ কিছু পদ্ধতি আছে যেমন font-size:larger; font-size:medium; font-size:small; font-size:smaller; font-size:xx-large; font-size:large; font-size:x-large; font-size:x-small; font-size:xx-small; ইত্যাদি।
ফন্ট ভেরিয়েন্ট (Font variant) :
যদি কোন ওয়েব পেজে বিশেষ কোন শিরোনাম এমনভাবে প্রদর্শনের প্রয়োজন পড়ে, যেখানে স্বাভাবিকভাবে লেখা টেক্সট সমূহের সবগুলো অক্ষর বড় হাতের হবে কিন্তু যেস্থানে ছোট হাতের অক্ষর হওয়ার কথা সেই স্থানের বড় হাতের অক্ষরগুলোর ফন্ট সাইজ তুলনামূলক স্বাভাবিক ফন্ট সাইজের চেয়ে ছোট হবে, এক্ষেত্রে ফন্ট ভেরিয়েন্ট ব্যবহার করা হয়।This Is an Example Of Variant Text লেখাটির ভারিয়েন্ট স্টাইল তৈরির জন্য Declaration করতে হবে font-variant: small-caps; ।
ফন্ট ওয়েট (font-weigh) :
কোন ওয়েব পেজে ব্যবহৃত টেক্সট সমূহ কতটা মোটা হবে বা চিকন হবে তা নির্ধারণ করার জন্য ফন্ট ওয়েট ব্যবহার করা হয়। বোল্ড টেক্সট তৈরির জন্য Declaration করতে হবে font-weight:bold; । টেক্সট সমূহ কতটা মোটা হবে তা নির্ধারণের জন্য সংখ্যা ব্যবহার করা যেতে পারে, যেমন font-weight:900; অথবা font-weight:800; । এছাড়া ফন্ট ওয়েট স্টাইল হিসেবে font-weight:lighter; এবং font-weight:bolder; ব্যবহার করা হয়।
ফন্ট (Font) :
একটা ওয়েব সাইটের প্রধান উদ্দেশ্য হচ্ছে ব্যবহারকারীকে প্রয়োজনীয় তথ্য সেবা প্রদান করা। কোন ওয়েব সাইটে তথ্য প্রদর্শনের ক্ষেত্রে প্রধান ভূমিকা পালন করে টেক্সট । সাইটে কোথায় কি ধরণের টেক্সট ব্যবহার করা হবে, আকার আকৃতি কেমন হবে এ সকল কিছুই নিয়ন্ত্রিত হয় সি এস এস এর ফন্ট এর মাধ্যমে। টেক্সট এর ফন্ট স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
- ফন্ট ফ্যামিলি (Font family)
- ফন্ট সাইজ(Font size)
- ফন্ট ভেরিয়েন্ট (Font variant)
- ফন্ট ওয়েট (font-weigh)
টেক্সট সমূহে কি ধরণের ফন্ট ব্যবহার করা হবে, তা নির্দেশ করার জন্য ফন্ট ফ্যামিলি ব্যবহার করা হয়। টেক্সট সমূহের জন্য Arial ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Arial; অনুরূপভাবে Tahoma ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Tahoma; । অনেক সময় টেক্সট সমূহের জন্য একটির পরিপূরক হিসেবে একাধিক ফন্ট Declaration এ উল্লেখ করা হয় যেমন font-family:Verdana, Geneva, Tahoma; । যখন ব্রাউজার প্রথম ফন্ট সাপোর্ট করবে না তখন টেক্সট সমূহ ২য় বা ৩য় ফন্টে প্রদর্শিত হবে।
ফন্ট সাইজ(Font size) :
ফন্ট ভেরিয়েন্ট (Font variant) :
যদি কোন ওয়েব পেজে বিশেষ কোন শিরোনাম এমনভাবে প্রদর্শনের প্রয়োজন পড়ে, যেখানে স্বাভাবিকভাবে লেখা টেক্সট সমূহের সবগুলো অক্ষর বড় হাতের হবে কিন্তু যেস্থানে ছোট হাতের অক্ষর হওয়ার কথা সেই স্থানের বড় হাতের অক্ষরগুলোর ফন্ট সাইজ তুলনামূলক স্বাভাবিক ফন্ট সাইজের চেয়ে ছোট হবে, এক্ষেত্রে ফন্ট ভেরিয়েন্ট ব্যবহার করা হয়।This Is an Example Of Variant Text লেখাটির ভারিয়েন্ট স্টাইল তৈরির জন্য Declaration করতে হবে font-variant: small-caps; ।
ফন্ট ওয়েট (font-weigh) :
কোন ওয়েব পেজে ব্যবহৃত টেক্সট সমূহ কতটা মোটা হবে বা চিকন হবে তা নির্ধারণ করার জন্য ফন্ট ওয়েট ব্যবহার করা হয়। বোল্ড টেক্সট তৈরির জন্য Declaration করতে হবে font-weight:bold; । টেক্সট সমূহ কতটা মোটা হবে তা নির্ধারণের জন্য সংখ্যা ব্যবহার করা যেতে পারে, যেমন font-weight:900; অথবা font-weight:800; । এছাড়া ফন্ট ওয়েট স্টাইল হিসেবে font-weight:lighter; এবং font-weight:bolder; ব্যবহার করা হয়।
অনুশীলন প্রজেক্ট :
<html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#090}
h1{
font-family:Arial;
font-size:xx-large;
font-weight:bold;
}
h2{
font-family:Tahoma; color: #C00
font-size:20px;
font-variant: small-caps;
font-weight:normal;
}
p{
font-family:Verdana, Geneva, Tahoma;
font-size:100%;
font-weight:lighter;
}
</style>
</head>
<body >
<h1>This text is written by Arial font.</h1>
<h2>This text is written by Tahoma font.</h2>
<p>Normaly,this text is written by Verdana font, But when browser does not support Verdana font, this text will be displayed by Geneva font or Tahoma font. </p>
</body>
</html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#090}
h1{
font-family:Arial;
font-size:xx-large;
font-weight:bold;
}
h2{
font-family:Tahoma; color: #C00
font-size:20px;
font-variant: small-caps;
font-weight:normal;
}
p{
font-family:Verdana, Geneva, Tahoma;
font-size:100%;
font-weight:lighter;
}
</style>
</head>
<body >
<h1>This text is written by Arial font.</h1>
<h2>This text is written by Tahoma font.</h2>
<p>Normaly,this text is written by Verdana font, But when browser does not support Verdana font, this text will be displayed by Geneva font or Tahoma font. </p>
</body>
</html>
Tags
CSS