- সিএসএস টিউটোরিয়ালঃ ১১তম পর্ব(লাইন হাইট এবং টেক্সট ইনডেন্ট)
- সিএসএস টিউটোরিয়ালঃ ১২তম পর্ব(টেক্সট এ্যালাইনমেন্ট)
- সিএসএস টিউটোরিয়ালঃ ১৩তম পর্ব(Ordered List)
- সিএসএস টিউটোরিয়ালঃ ৫ম পর্ব(সিলেক্টরস পার্ট-২)
- সিএসএস টিউটোরিয়ালঃ ২য় পর্ব(গঠন এবং কোডিং এর পদ্ধতি)
- সিএসএস টিউটোরিয়ালঃ ষষ্ঠ পর্ব(সিলেক্টরস পার্ট-৩)
- সিএসএস টিউটোরিয়ালঃ ১ম পর্ব(পরিচিতি)
- সিএসএস টিউটোরিয়ালঃ ৭ম পর্ব(সিলেক্টরস পার্ট-৪)
- সিএসএস টিউটোরিয়ালঃ ৩য় পর্ব(স্টাইলসীটের ধরন)
- সিএসএস টিউটোরিয়ালঃ ৮ম পর্ব(ফন্ট এবং ফন্ট সাইজ)
- সিএসএস টিউটোরিয়ালঃ ৪র্থ পর্ব(সিলেক্টরস পার্ট-১)
- সিএসএস টিউটোরিয়ালঃ ৯ম পর্ব(ফন্ট ওয়েট এবং ফন্ট স্টাইল)
- সিএসএস টিউটোরিয়ালঃ ১০ম পর্ব(ফন্ট ভেরিয়েন্ট এবং ফন্ট কালার)
সিএসএস এ ফন্ট নিয়ে কাজ করার সময় আপনাকে অনেক ফন্ট এর নাম মুখস্ত রাখতে হবে। সচারচর একেক ওয়েবসাইটে একেক ফন্ট ইউজ হলেও কিছু ফন্ট আছে যেগুলো ব্যবহার প্রায় ওয়েবসাইট এর দেখা যায়। আসলে ফন্ট এর ব্যবহার ডিজাইনার এর ইচ্ছার উপরে নির্ভর করবে। ব্যক্তিগত ভাবে আমি ১টি ফন্ট ইউজ করি ওয়েবসাইট ডিজাইন এর জন্য। আর সেটি হলঃ “Tahoma”. মনে রাখবেন, আপনি ওয়েবসাইট এর জন্য এমন ফন্ট নির্বাচন করবেন না যেটা ওয়েবসাইট ভিসিটরের কম্পিউটারে ইন্সটাল্ড থাকবে না। কারণ, আপনি জানেন না আপনার ওয়েবসাইট ভিজিটের পিসিতে সেই ফন্ট আছে কিনা। এবার এমন ফন্টও ইউজ করবেন না যেটি অড দেখাবে। তাই, গতানুগতিকভাবে কমন এবং সিম্পল ফন্ট ইউজ করাই আদর্শিক!
নিচের কিছু কমন ফন্ট এর লিস্ট দেয়া হল যেগুলো সব কম্পিউটারে উইন্ডোজ এর সাথেই ইন্সটাল্ড হয়ে যায়ঃ
| Fonts Types | Fonts Name |
| Serif | Times News Roman, Georgia. |
| Sans Serif | Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva. |
| Moonscape | Courier, Courier New. |
| Cursive | Comic Sans. |
| Fantasy | Impact, Western, Decorative Font. |
Font Family:
কোন ইলিমেন্টে বিভিন্ন ধরণের ফন্ট দিতে চাইলে font-family প্রোপার্টি এবং ভ্যালু হিসেবে ফন্টের নাম Times New Roman, Tahoma, Georgia, Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva, Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva সহ আরও অন্যান্য ফন্ট অ্যাপ্লাই করে দেখতে হবে। এইচটিএমএল ইলিমেন্টে অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ
[html]
<html>
<head>
<style type=”text/css”>
#tahoma{
font-family: Tahoma;
}
#impact{
font-family: Impact;
}
</style>
</head>
<body>
<div>
<h2> Welcome to RangpurSource’s CSS Class! </h2>
</div>
<p id=”tahoma”> This is CSS Font styled in TAHOMA </p>
<p id=”impact”> This is CSS Font styled in IMPACT </p>
</body>
</html>
<pre>[/html]
Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন cssfont বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…
Font Size:
কোন ইলিমেন্টে এর ফন্ট সাইজ দিতে font-size প্রোপার্টি এবং ভ্যালুই হিসেবে Length unit(14px) / percentage(100%) / xx-small/ x-small/ small/ medium/ large/ x-large/ xx-large অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট সাইজ অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ
[html]
<html>
<head>
<style type=”text/css”>
#size16{
font-size: 16px;
}
#size20{
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h2> Welcome to RangpurSource’s CSS Class! </h2>
</div>
<p id=”size16”> This is CSS Font size in 16px </p>
<p id=” size20”> This is CSS Font size in 20px </p>
</body>
</html>
[/html]
Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন cssfontsize বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…
বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। 🙂
