কম্পিউটার টিউটোরিয়াল

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

HTML DOM Style fontVariant প্রপার্টি ফন্টকে স্মল-ক্যাপস (small-caps)-এ রূপান্তর করতে ব্যবহৃত হয়। স্মল-ক্যাপসে সকল ছোট হাতের অক্ষর বড় হাতের আকারে রূপান্তরিত হয় কিন্তু তাদের আকার ছোট হাতের অক্ষরের সমান থাকে। বড় হাতের অক্ষরগুলো প্রভাবিত হয় না।

সিনট্যাক্স

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

object.style.fontVariant = "normal|small-caps|initial|inherit"

প্রপার্টি মানগুলি

মান বিবরণ
normal ফন্টকে নরমাল সেট করে, এটি ডিফল্ট মান।
small-caps ফন্টকে স্মল ক্যাপিটাল লেটারে প্রদর্শন করে।
initial প্রপার্টিকে ডিফল্ট মানে সেট করে।
inherit প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান উত্তরাধিকারসূত্রে পায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
  #demo2, #demo1 {
    font-family: 'times new roman';
    font-size: 25px;
  }
</style>
<script>
  function changeFontVariant() {
    document.getElementById("demo1").style.fontVariant = "small-caps";
    document.getElementById("demo2").style.fontVariant = "small-caps";
    document.getElementById("Sample").innerHTML = "ফন্ট ভেরিয়েন্ট স্মল ক্যাপসে পরিবর্তন করা হয়েছে।";
  }
</script>
</head>
<body>
  <div id="demo1">This is demo text</div>
  <div id="demo2">This is demo text</div>
  <p>নিচের বাটনে ক্লিক করে উপরের ডিভগুলোর টেক্সটের ফন্ট ভেরিয়েন্ট পরিবর্তন করুন</p>
  <button onclick="changeFontVariant()">ফন্ট ভেরিয়েন্ট পরিবর্তন করুন</button>
  <p id="Sample"></p>
</body>
</html>

আউটপুট

প্রাথমিক অবস্থায় টেক্সট নরমাল কেসে থাকবে।

"ফন্ট ভেরিয়েন্ট পরিবর্তন করুন" বাটনে ক্লিক করার পর টেক্সট স্মল-ক্যাপসে রূপান্তরিত হবে (ছোট হাতের অক্ষর বড় হাতের আকারে কিন্তু ছোট আকারে দেখাবে)।

  1. HTML DOM Style textDecorationColor প্রোপার্টি

  2. HTML DOM Style transformStyle প্রোপার্টি

  3. HTML DOM Style transformOrigin প্রোপার্টি

  4. HTML DOM Style quotes প্রোপার্টি