HTML DOM Style font প্রপার্টি

HTML DOM Style font প্রপার্টি ছয়টি প্রপার্টি - font-style, font-variant, font-weight, font-size, line-height, এবং font-family - সেট বা পেতে ব্যবহৃত হয়। ফন্ট আকার এবং ফন্ট ফ্যামিলি আবশ্যক মান, অন্যান্য অনুপস্থিত মানের জন্য ডিফল্ট সেট করে।

সিনট্যাক্স

font প্রপার্টি রিটার্ন করার জন্য:

object.style.font

font প্রপার্টি সেট করার জন্য:

মান	বিবরণ
style	ফন্ট স্টাইল সেট করতে।
variant	টেক্সটকে স্মল-ক্যাপস ফন্টে সেট করতে।
weight	ফন্টের বোল্ডনেস নির্দিষ্ট করতে।
size	ফন্ট আকার নির্দিষ্ট করতে।
lineHeight	লাইনগুলোর মধ্যবর্তী দূরত্ব নির্দিষ্ট করতে।
family	ফন্ট ফেস সেট করতে।
caption	ক্যাপশন কন্ট্রোলের জন্য ফন্ট প্রয়োগ করে (বাটন, ড্রপ-ডাউন ইত্যাদি)।
icon	লেবেল আইকন ফন্ট নির্দিষ্ট করতে।
menu	মেনুতে ব্যবহৃত ফন্ট।
message-box	ডায়লগ বক্সে ব্যবহৃত ফন্ট।
small-caption	ছোট কন্ট্রোলের জন্য ফন্ট।
status-bar	উইন্ডো স্ট্যাটাস বারের ফন্ট বর্তমান ফন্টে সেট করে।
initial	প্রপার্টিকে ডিফল্ট মানে সেট করে।
inherit	প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান উত্তরাধিকারসূত্রে পায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
  .PARA1 {
    font: oblique 5deg small-caps bold 1.3em/3 cursive;
  }
</style>
<script>
  function changeFont() {
    for(var i=0; i<2; i++) {
      document.getElementsByClassName("PARA1")[i].style.font = "italic bold 30px Verdana";
    }
    document.getElementById("Sample").innerHTML = "উপরের দুটি প্যারাগ্রাফের টেক্সট এখন পরিবর্তন করা হয়েছে";
  }
</script>
</head>
<body>
  <p class="PARA1">This is demo text</p>
  <p class="PARA1">This is another demo text</p>
  <p>নিচের বাটনে ক্লিক করে উপরের কন্টেইনার ডিভের ফ্লেক্স ডাইরেকশন পরিবর্তন করুন</p>
  <button onclick="changeFont()">ফন্ট পরিবর্তন করুন</button>
  <p id="Sample"></p>
</body>
</html>

আউটপুট

প্রাথমিক অবস্থায় প্যারাগ্রাফগুলোর ফন্ট oblique 5deg small-caps bold 1.3em/3 cursive হবে।

"ফন্ট পরিবর্তন করুন" বাটনে ক্লিক করার পর প্যারাগ্রাফগুলোর ফন্ট italic bold 30px Verdana হবে।