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>
আউটপুট
প্রাথমিক অবস্থায় টেক্সট নরমাল কেসে থাকবে।
"ফন্ট ভেরিয়েন্ট পরিবর্তন করুন" বাটনে ক্লিক করার পর টেক্সট স্মল-ক্যাপসে রূপান্তরিত হবে (ছোট হাতের অক্ষর বড় হাতের আকারে কিন্তু ছোট আকারে দেখাবে)।