সিএসএস font-family প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| font-family | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা ও ব্যবহার
font-family প্রোপার্টির মাধ্যমে একটি এলিমেন্টের ফন্ট নির্দিষ্ট করে দেয়া হয়।
font-family প্রোপার্টির ভ্যালু হিসেবে কয়েকটি ফন্টের নাম রাখতে পারে, এতে করে ব্রাউজারে যদি প্রথম নামটি সাপোর্ট না করে তাহলে ব্রাউজার পরের নাম গুলোর মাধ্যমে চেষ্টা করে।
দুই ধরনের ফন্ট ফ্যামিলির নাম রয়েছে:
- family-name - একটি ফন্ট ফ্যামিলির নাম, যেমন; "times", "courier", "arial" ইত্যাদি।
- generic-family - একটি জেনেরিক ফ্যামিলির নাম, যেমন; "serif", "sans-serif", "cursive", "fantasy", "monospace" ।
আপনি যেই ফন্টটি চান সেই ফন্ট দিয়ে শুরু করুন, এবং সবসয়ই জেনেরিক ফ্যামিলি দিয়ে শেষ করুন। এতে ব্রাউজার অন্য ফন্ট খুজে না পেলে জেনেরিক ফ্যামিলি থেকে একই ফন্টটি খুজে নেয়।
পরামর্শঃ
- প্রত্যেকটি ভ্যালু কমার(,) মাধ্যমে আলাদা করা হয়।
- যদি ফন্টের নামের মধ্যে কোন খালি জায়গা থাকে তাহলে একে অবশ্যই কোটেশনের মধ্যে রাখতে হবে। যখন এইচটিএমএলে "style" এট্রিবিউট ব্যবহার করা হয় তখন অবশ্যই একক কোটেশনে রাখতে হবে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| ব্রাউজারের উপর নির্ভর করে। | হ্যাঁ। | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
font-family: font/initial/inherit;
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>সিএসএসfont-family</h1>
<p class="serif">আমার নাম Azizur Rahman Aziz</p>
<p class="sansserif">আমার নাম Azizur Rahman Aziz</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.fontFamily="Verdana,sans-serif"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<p>DIV এলিমেন্ট এর font-family প্রোপাটিকে পরিবর্তন করতে "চেষ্টা করি" বাটনে ক্লিক করি ।</p>
<button onclick="myFunction()">চেষ্টা করি</button>
<div id="thisDiv">
আমরা করবো জয়!আমরা করবো জয়!আমরা করবো জয়!একদিন...
আহা বুকের গভিরে আছে প্রত্যয়আমরা করবো জয়!একদিন... ।।
একদিন সূর্যের ভোর,একদিন স্বপ্নের ভোর,একদিন সত্যের ভোর ,আসবেই...
এই মনে আছে বিশ্বাস,আমরা করি বিশ্বাস,সত্যের ভোর আসবে
একদিন...
</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.fontFamily = "Verdana, sans-serif";
}
</script>
</body>
</html>
ফলাফল
font-family প্রোপার্টির ভ্যালু-সমূহ
- family-name, generic-family - ফন্ট ফ্যামিলির নাম এবং জেনেরিক ফ্যামিলি নামের একটি অগ্রাধিকারভিত্তিক তালিকা।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
font-family প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।