সিএসএস font প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| font | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা এবং ব্যবহার
একটি ডিক্লারেশনের মাধ্যমে ফন্টের সকল প্রোপার্টিগুলো যুক্ত করার জন্য font হলো একটি সংক্ষিপ্ত প্রোপার্টি।
পরামর্শঃ
- font এর মাধ্যমে একবারে যেই প্রোপার্টিগুলো সেট করা যায় তা ক্রমানুযায়ী দেয়া হলো: "font-style font-variant font-weight font-size/line-height font-family"
- এখানে font-size এবং font-family এর ভ্যালু আবশ্যক। অন্য ভ্যালুগুলোর মধ্যে কোন একটি যদি নির্দিষ্ট করে না দেয়া হয় তাহলে কম্পাইলার ডিফল্ট ভ্যালুটিকে নিয়ে নিবে।
- line-height প্রোপার্টি লাইনগুলোর মধ্যে স্পেস সেট করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| font | হ্যাঁ | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
font: font-style font-variant font-weight font-size/line-heightfont-family
/caption/icon/menu/message-box/small-caption/status-bar/initial/inherit;
একটি ডিক্লারেশনের মাধ্যমে font এর সকল প্রোপার্টিগুলো যুক্ত করা যায় তা নিচে দেখানো হলো:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
p.test1 {
font: 20px arial, sans-serif;
}
p.test2 {
font: italic bold 15px/30px Georgia, serif;
}
</style>
</head>
<body>
<p class="test1">এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ।
এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ।</p>
<p class="test2">এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ।
এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ। এটি একটি প্যারাগ্রাপ।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.font="italic small-caps bold 12px arial,sans-serif"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<p>DIV এলিমেন্ট এর font প্রোপার্টিকে পরিবর্তন করার জন্য "চেষ্টা করি" বাটনে ক্লিক করি।</p>
<button onclick="myFunction()"> চেষ্টা করি </button>
<div id="thisDiv">
আমরা করবো জয়!আমরা করবো জয়!আমরা করবো জয়!একদিন...
আহা বুকের গভিরে আছে প্রত্যয়আমরা করবো জয়!একদিন... ।।
একদিন সূর্যের ভোর,একদিন স্বপ্নের ভোর,একদিন সত্যের ভোর ,আসবেই...
এই মনে আছে বিশ্বাস,আমরা করি বিশ্বাস,সত্যের ভোর আসবে
একদিন...
</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.font = "italic small-caps bold 16px arial, sans-serif";
}
</script>
</body>
</html>
ফলাফল
font প্রোপার্টির ভ্যালু-সমূহ
- font-style - font এর স্টাইলকে নির্দিষ্ট করে এবং এর ডিফল্ট ভ্যালু হলো "normal"। সম্ভাব্য ভ্যালু গুলোর জন্য font-style প্রোপার্টিটি দেখুন।
- font-variant -font এর বিভিন্নতা নির্দিষ্ট করে এবং এর ডিফল্ট ভ্যালু হলো "normal"। সম্ভাব্য ভ্যালু গুলোর জন্য font-variant প্রোপার্টিটি দেখুন।
- font-weight -font এর weight নির্দিষ্ট করে এবং ডিফল্ট ভ্যালু হলো "normal"। সম্ভাব্য ভ্যালু গুলোর জন্য font-weight প্রোপার্টিটি দেখুন।
- font-size/line-height -font এর আকার এবং লাইন গুলোর মধ্যে স্পেস নির্দিষ্ট করে। ডিফল্ট ভ্যালু হলো "normal" । সম্ভাব্য ভ্যালু গুলোর জন্য font-size এবং line-height প্রোপার্টিগুলো দেখুন।
- font-family - font এর family নির্দিষ্ট করে। ডিফল্ট ভ্যালু আপনার ব্রাউজারের উপর নির্ভর করে। সম্ভাব্য ভ্যালু গুলোর জন্য font-family প্রোপার্টিটি দেখুন।
- caption -ক্যাপশন কন্ট্রোলে ব্যবহার হয় এমন ফন্ট ব্যবহার করে (যেমন buttons, drop-downs ইত্যাদি।)
- icon -আইকন লেভেলে ব্যবহার হয় এমন ফন্ট ব্যবহার করে।
- menu - ড্রপ-ডাউন মেনুতে ব্যবহার হয় এমন ফন্ট ব্যবহার করে।
- message-box -ডায়ালগ বক্সে ব্যবহার হয় এমন ফন্ট ব্যবহার করে।
- small-caption - ক্যাপশন ফন্টের একটি ছোট ভার্সন।
- status-bar - স্যাটাস-বার কর্তৃক ব্যবহার হয় এমন ফন্ট ব্যবহার করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit -এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।