সিএসএস টিউটোরিয়ালঃ ৮ম পর্ব(ফন্ট এবং ফন্ট সাইজ)

0
301 বার দেখা হয়েছে।

সিএসএস এ ফন্ট নিয়ে কাজ করার সময় আপনাকে অনেক ফন্ট এর নাম মুখস্ত রাখতে হবে। সচারচর একেক ওয়েবসাইটে একেক ফন্ট ইউজ হলেও কিছু ফন্ট আছে যেগুলো ব্যবহার প্রায় ওয়েবসাইট এর দেখা যায়। আসলে ফন্ট এর ব্যবহার ডিজাইনার এর ইচ্ছার উপরে নির্ভর করবে। ব্যক্তিগত ভাবে আমি ১টি ফন্ট ইউজ করি ওয়েবসাইট ডিজাইন এর জন্য। আর সেটি হলঃ “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 সহ আরও অন্যান্য ফন্ট অ্যাপ্লাই করে দেখতে হবে। এইচটিএমএল ইলিমেন্টে অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ

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 অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট সাইজ অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন cssfontsize বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপেপেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।  🙂

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ৭ম পর্ব(সিলেক্টরস পার্ট-৪)সিএসএস টিউটোরিয়ালঃ ৯ম পর্ব(ফন্ট ওয়েট এবং ফন্ট স্টাইল) >>
Print Friendly, PDF & Email

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.