Creative IT Blog Just another WordPress site
Related Articles
ফন্ট (Font): কোন ওয়েব সাইটে তথ্য প্রদর্শনের ক্ষেত্রে প্রধান ভূমিকা পালন করে টেক্সট । সাইটের মধ্যে কথায় কি ধরনের টেক্সট, টেক্সটের কালার এবং টেক্সটের সাইজ কেমন হবে সেটা সবসময় নির্ধারন করা হয় সি এস এস এর ফন্ট এর মাধ্যমে। টেক্সট এর ফন্ট স্টাইল নির্ধারন করার জন্য বেশ কয়েকটি বিষয় খেয়াল রাখতে হয়। এগুলো হচ্ছে –
- ফন্ট ফ্যামিলি (Font family)
- ফন্ট সাইজ (Font size)
- ফন্ট ওয়েট (font-weigh)
- ফন্ট স্টাইল (font-style)
ফন্ট ফ্যামিলি (Font family):
টেক্সট সমূহে কি ধরণের ফন্ট ব্যবহার করা হবে, তা নির্দেশ করার জন্য ফন্ট ফ্যামিলি ব্যবহার করা হয়। টেক্সট সমূহের জন্য Arial ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Arial; অনুরূপভাবে monospace ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:monospace; । অনেক সময় টেক্সট সমূহের জন্য একটির পরিপূরক হিসেবে একাধিক ফন্ট Declaration এ উল্লেখ করা হয় যেমন font-family:Verdana, Geneva, Tahoma; । যখন ব্রাউজার প্রথম ফন্ট সাপোর্ট করবে না তখন টেক্সট সমূহ ২য় বা ৩য় ফন্টে প্রদর্শিত হবে।
ফন্ট সাইজ (Font size):
টেক্সটের সাইজ কত বড় বা ছোট হবে সেটা নির্ধারন করার জন্য ফন্ট সাইজ ব্যাবহার করা হয় ।
ফন্ট ওয়েট (font-weight ):
ফন্ট ওয়েট এর কাজ হচ্ছে কোন টেক্সটের স্টাইল কেমন হবে অর্থাৎ টেক্সট bold, semibold, extrabold বা তার চেয়েও তুলনামূলক কম হলে সে ক্ষেত্রে সেটা ফন্ট ওয়েট দারা করে দিতে পারি ।
ফন্ট স্টাইল (font-style) :
ফন্ট স্টাইল দারা টেক্সটকে regular অথবা italic করতে পারি ।
নিচে example আকারে দেখানো হল : –
<!DOCTYPE html>
<html>
<head>
<title> www.tutohost.com</title>
<style>
h1{
font-family:Arial;
font-size: 30px;
font-style: normal;
color: #06770a;
}
h2{
font-family:monospace;
font-size: 24px;
color: #C00;
font-weight: bold;
font-style: italic;
}
p{
font-family:Verdana, Geneva, Tahoma;
font-weight: 300;
}
</style>
</head>
<body >
<h1>This text is Arial font.</h1>
<h2>This text is monospace 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>
