CSS ফন্ট প্রপার্টি একটি টেক্সটের ফন্ট ফ্যামিলি, বোল্ডনেস, আকার এবং স্টাইল নির্ধারণ করে।
CSS-এ, দুই ধরনের ফন্ট ফ্যামিলি নাম আছে:
| জেনেরিক ফ্যামিলি | ফন্ট ফ্যামিলি | বিবরণ |
|---|---|---|
| Serif | Times New Roman Georgia | কিছু অক্ষরের শেষে সেরিফ ফন্টে ছোট লাইন থাকে |
| Sans-serif | Arial Verdana | "Sans" মানে ছাড়া - এই ফন্টগুলোর অক্ষরের শেষে কোনো লাইন থাকে না |
| Monospace | Courier New Lucida Console | সব মনোস্পেস অক্ষরের প্রস্থ একই |
মনে রাখবেন: কম্পিউটার স্ক্রিনে, সেরিফ ফন্টের চেয়ে সান্স-সেরিফ ফন্ট পড়া সহজ বলে মনে করা হয়।
font-family প্রপার্টি দিয়ে একটি টেক্সটের ফন্ট ফ্যামিলি সেট করা হয়।
font-family প্রপার্টিতে একটি "ফলব্যাক" সিস্টেম হিসেবে একাধিক ফন্টের নাম থাকা উচিত। ব্রাউজার প্রথম ফন্টটি সমর্থন না করলে, এটি পরের ফন্টটি চেষ্টা করে, এভাবে চলতে থাকে।
আপনি যে ফন্ট চান তা দিয়ে শুরু করুন, এবং একটি জেনেরিক ফ্যামিলি দিয়ে শেষ করুন, যাতে অন্য কোনো ফন্ট উপলব্ধ না থাকলে ব্রাউজার সেই জেনেরিক ফ্যামিলি থেকে একটি একই রকম ফন্ট বেছে নিতে পারে।
মনে রাখবেন: একটি ফন্ট ফ্যামিলির নাম একের বেশি শব্দের হলে, এটি অবশ্যই উদ্ধৃতি চিহ্নে থাকতে হবে, যেমন: "Times New Roman"।
একের বেশি ফন্ট ফ্যামিলি একটি কমা-দিয়ে-আলাদা-করা লিস্টে উল্লেখ করা হয়:
p {
font-family: "Times New Roman", Times, serif;
}font-style প্রপার্টি বেশিরভাগ সময় ইটালিক টেক্সট নির্ধারণ করতে ব্যবহৃত হয়।
এই প্রপার্টির তিনটি মান আছে:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}font-size প্রপার্টি টেক্সটের আকার সেট করে।
ওয়েব ডিজাইনে টেক্সটের আকার নিয়ন্ত্রণ করতে পারা গুরুত্বপূর্ণ। তবে, প্যারাগ্রাফকে হেডিংয়ের মতো বা হেডিংকে প্যারাগ্রাফের মতো দেখাতে ফন্ট সাইজ সমন্বয় ব্যবহার করা উচিত নয়।
সবসময় সঠিক HTML ট্যাগ ব্যবহার করুন, যেমন হেডিংয়ের জন্য <h1> - <h6> এবং প্যারাগ্রাফের জন্য <p>।
font-size-এর মান অ্যাবসোলিউট বা রিলেটিভ আকার হতে পারে।
অ্যাবসোলিউট আকার:
রিলেটিভ আকার:
মনে রাখবেন: ফন্ট সাইজ উল্লেখ না করলে, প্যারাগ্রাফের মতো সাধারণ টেক্সটের ডিফল্ট আকার হলো 16px (16px=1em)।
পিক্সেল দিয়ে টেক্সট সাইজ সেট করলে আপনি টেক্সটের আকারের উপর সম্পূর্ণ নিয়ন্ত্রণ পান:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}টিপস: পিক্সেল ব্যবহার করলেও, পুরো পেজ রিসাইজ করতে আপনি জুম টুল ব্যবহার করতে পারেন।
ব্যবহারকারীদের (ব্রাউজার মেনুতে) টেক্সট রিসাইজ করার সুযোগ দিতে, অনেক ডেভেলপার পিক্সেলের বদলে em ব্যবহার করেন।
W3C em সাইজ ইউনিট ব্যবহারের পরামর্শ দেয়।
1em বর্তমান ফন্ট সাইজের সমান। ব্রাউজারে ডিফল্ট টেক্সট সাইজ হলো 16px। তাই, 1em-এর ডিফল্ট আকার হলো 16px।
এই সূত্র ব্যবহার করে পিক্সেল থেকে em-এ আকার হিসাব করা যায়: pixels/16=em
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}উপরের উদাহরণে, em-এ টেক্সট সাইজ আগের পিক্সেল উদাহরণের মতোই। তবে, em সাইজ দিয়ে, সব ব্রাউজারে টেক্সট সাইজ সমন্বয় করা সম্ভব।
দুর্ভাগ্যবশত, IE-এর পুরনো ভার্সনে এখনও একটি সমস্যা আছে। বড় করলে টেক্সট যতটা হওয়া উচিত তার চেয়ে বড় হয়ে যায়, এবং ছোট করলে যতটা হওয়া উচিত তার চেয়ে ছোট হয়ে যায়।
সব ব্রাউজারে কাজ করে এমন সমাধান হলো, <body> এলিমেন্টের জন্য শতাংশে একটি ডিফল্ট font-size সেট করা:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}আমাদের কোড এখন দারুণভাবে কাজ করে! এটি সব ব্রাউজারে একই টেক্সট সাইজ দেখায়, এবং সব ব্রাউজারকে টেক্সট জুম বা রিসাইজ করার সুযোগ দেয়!
font-weight প্রপার্টি একটি ফন্টের ওয়েট নির্ধারণ করে:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}টেক্সট সাইজ একটি vw ইউনিট দিয়ে সেট করা যায়, যার মানে "viewport width" (ভিউপোর্টের প্রস্থ)।
এভাবে টেক্সট সাইজ ব্রাউজার উইন্ডোর আকার অনুযায়ী পরিবর্তিত হবে:
ফন্ট সাইজ কীভাবে স্কেল হয় তা দেখতে ব্রাউজার উইন্ডো রিসাইজ করুন।
<h1 style="font-size:10vw">Hello World</h1>ভিউপোর্ট হলো ব্রাউজার উইন্ডোর আকার। 1vw = ভিউপোর্টের প্রস্থের 1%। ভিউপোর্ট 50cm প্রশস্ত হলে, 1vw হলো 0.5cm।
font-variant প্রপার্টি নির্ধারণ করে একটি টেক্সট small-caps ফন্টে প্রদর্শিত হবে কিনা।
একটি small-caps ফন্টে, সব ছোট হাতের অক্ষর বড় হাতের অক্ষরে রূপান্তরিত হয়। তবে, রূপান্তরিত বড় হাতের অক্ষরগুলো টেক্সটের আসল বড় হাতের অক্ষরের চেয়ে ছোট ফন্ট সাইজে দেখায়।
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}| প্রপার্টি | বিবরণ |
|---|---|
| font | এক ঘোষণায় সব ফন্ট প্রপার্টি সেট করে |
| font-family | টেক্সটের জন্য ফন্ট ফ্যামিলি নির্ধারণ করে |
| font-size | টেক্সটের ফন্ট সাইজ নির্ধারণ করে |
| font-style | টেক্সটের জন্য ফন্ট স্টাইল নির্ধারণ করে |
| font-variant | একটি টেক্সট small-caps ফন্টে প্রদর্শিত হবে কিনা তা নির্ধারণ করে |
| font-weight | একটি ফন্টের ওয়েট নির্ধারণ করে |