ওয়েব ডিজাইনে একটি ওয়েব পেজের টেক্সট স্টাইল করা অত্যন্ত গুরুত্বপূর্ণ। উদাহরণস্বরূপ, আপনি হেডারগুলিকে নির্দিষ্ট ফন্টে দেখাতে চাইতে পারেন, অথবা একটি পেজের সকল টেক্সটে serif ফন্ট ব্যবহার করতে চাইতে পারেন।
CSS font-family প্রপার্টি কী?
এখানেই কাজ করে CSS font-family প্রপার্টি। এই প্রপার্টি আপনাকে এক বা একাধিক ফন্ট ফ্যামিলি নির্দিষ্ট করার সুযোগ দেয় যা ওয়েব পেজের টেক্সট স্টাইল করতে ব্যবহৃত হবে।
সিনট্যাক্স এবং ব্যবহার
font-family প্রপার্টির সিনট্যাক্স নিম্নরূপ:
font-family: fontFamilyOne, fontFamilyTwo, ...;
এই প্রপার্টি একক ফন্ট বা ফন্টের একটি তালিকা গ্রহণ করে। একাধিক ফন্ট নির্দিষ্ট করলে প্রতিটি ফন্টকে কমা দিয়ে আলাদা করতে হয়। ব্রাউজার তালিকার প্রথম ফন্টটি ব্যবহার করার চেষ্টা করে যা ইনস্টল করা থাকে বা ডাউনলোড করা সম্ভব। যদি প্রথম ফন্টটি উপলব্ধ না থাকে, তবে দ্বিতীয় ফন্টটি ব্যবহার করা হয়, এবং এই ক्रम যেতে থাকে।
গুরুত্বপূর্ণভাবে, font-family প্রপার্টি টেক্সট ব্লকের প্রতিটি ক্যারেক্টারের জন্য ফন্ট নির্বাচন করে। তাই যদি কোনো নির্দিষ্ট ক্যারেক্টার এক ফন্টে উপলব্ধ না থাকে, তবে আপনার ফন্ট ফ্যামিলি তালিকার পরবর্তী ফন্টটি চেষ্টা করা হয়, যতক্ষণ না উপযুক্ত ফন্টটি পাওয়া যায়।
জেনেরিক ফন্ট ফ্যামিলি
font-family প্রপার্টি ব্যবহার করার দুটি প্রধান উপায় আছে: কাস্টম ফন্ট নির্দিষ্ট করা বা জেনেরিক ফন্ট ফ্যামিলি প্রয়োগ করা। জেনেরিক ফন্ট ফ্যামিলি গুলো হলো:
- serif: ক্যারেক্টারগুলো সেরিফ টাইপফেস ব্যবহার করে (যেমন: Lucida Bright, Palladio)।
- sans-serif: ক্যারেক্টারগুলো স্যান-সেরিফ টাইপফেস ব্যবহার করে (যেমন: Open Sans, Trebuchet MS)।
- monospace: সকল ক্যারেক্টারের একই প্রস্থ থাকে (যেমন: monospace, Menlo)।
- cursive: ক্যারেক্টারগুলোর জোড়া স্ট্রোক থাকে (যেমন: Lucida Calligraphy)।
- fantasy: সজ্জামূলক ফন্ট যা ক্যারেক্টারগুলোর প্রতি মনোযোগ আকর্ষণ করে (যেমন: Papyrus)।
ব্যবহারিক উদাহরণ
উদাহরণ ১: হেডিং স্টাইল করা
একটি স্থানীয় স্ট্যাম্প ক্লাবের "Contact" পেজের সকল <h1> হেডিংকে "Open Sans" ফন্টে পরিবর্তন করার জন্য নিচের কোড ব্যবহার করা হয়েছে:
<html>
<h1>Contact Us</h1>
<style>
h1 { font-family: "Open Sans", sans-serif; }
</style>
</html>
এখানে <h1> এলিমেন্টগুলো "Open Sans" ফন্টে দেখাবে, আর যদি সেটি উপলব্ধ না থাকে তবে জেনেরিক "sans-serif" ফন্টটি ব্যবহার হবে।
উদাহরণ ২: প্যারাগ্রাফ স্টাইল করা
একই পেজের সকল <p> এলিমেন্টকে "Times" ফন্টে স্টাইল করার জন্য:
<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p { font-family: "Times", serif; }
</style>
</html>
ব্রাউজার প্রথমে "Times" ফন্ট ব্যবহার করার চেষ্টা করবে, না পেলে "serif" ফন্টটি ব্যবহার করবে।
সেরা অনুশীলন
font-family প্রপার্টি ব্যবহার করার সময় কমপক্ষে একটি জেনেরিক ফন্ট ফ্যামিলি নাম (serif, sans-serif, monospace ইত্যাদি) অন্তর্ভুক্ত করা সেরা অনুশীলন। এটি নিশ্চিত করে যে যদি তালিকার অন্য ফন্টগুলো উপলব্ধ না থাকে, তবে ব্রাউজারটি যেন পেজের টেক্সট প্রদর্শনের জন্য একটি ফন্ট নির্বাচন করতে পারে।
উপসংহার
CSS font-family প্রপার্টি আপনাকে ওয়েব পেজের টেক্সটের স্টাইল নির্দিষ্ট করার ক্ষমতা দেয়। আপনি এই প্রপার্টি ব্যবহার করে "Arial" ফন্ট বা "cursive" জেনেরিক ফন্ট ব্যবহার করতে পারেন। এই টিউটোরিয়ালে উদাহরণসহ font-family প্রপার্টির মূল বিষয়গুলো আলোচনা করা হয়েছে। এখন আপনি একজন দক্ষ ওয়েব ডিজাইনারের মতো font-family প্রপার্টি ব্যবহার করার জন্য প্রস্তুত!
