HTML DOM Style font-family প্রপার্টি নির্বাচিত এলিমেন্টের জন্য নির্দিষ্ট ফন্ট তালিকা সেট বা রিটার্ন করতে ব্যবহৃত হয়। ওয়েব-সেফ ফন্ট ব্যবহার করা এবং অতিরিক্ত ফন্ট নির্দিষ্ট করা পরামর্শ দেওয়া হয়।
সিনট্যাক্স
fontFamily প্রপার্টি সেট করার জন্য:
object.style.fontFamily = "font1, font2, etc.|initial|inherit"
এখানে, font1, font2 কমা দ্বারা পৃথক ফন্ট তালিকা। যদি প্রথম ফন্ট প্রয়োগ করা না যায়, তাহলে দ্বিতীয়টি প্রয়োগ করা হবে এবং এভাবেই চলবে। initial প্রপার্টি মানকে ডিফল্ট মান সেট করে, inherit প্যারেন্ট প্রপার্টি মান সেট করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
li {
font-size: 1.1em;
background-color: snow;
font-family: cursive;
}
</style>
<script>
function changeFontFamily() {
for(var i=0; i<3; i++) {
document.getElementsByTagName("li")[i].style.fontFamily = "Sans-Serif";
}
document.getElementById("Sample").innerHTML = "উপরের লিস্টের ফন্ট ফ্যামিলি এখন Helvetica-এ সেট করা হয়েছে";
}
</script>
</head>
<body>
<ul>
<li>This is list item 1.</li>
<li>This is list item 2</li>
<li>This is list item 3</li>
</ul>
<p>নিচের বাটনে ক্লিক করে উপরের লিস্ট আইটেমের ফন্ট ফ্যামিলি পরিবর্তন করুন</p>
<button onclick="changeFontFamily()">ফন্ট ফ্যামিলি পরিবর্তন করুন</button>
<p id="Sample"></p>
</body>
</html>
আউটপুট
প্রাথমিক অবস্থায় লিস্ট আইটেমের ফন্ট cursive হবে।
"ফন্ট ফ্যামিলি পরিবর্তন করুন" বাটনে ক্লিক করার পর সব লিস্ট আইটেমের ফন্ট Sans-Serif হবে।