এইচটিএমএল ডম স্টাইল ফন্ট ভ্যারিয়েন্ট প্রপার্টিটি সেটিং বা রিটার্ন করার জন্য ব্যবহৃত হয় যদি ফন্টটিকে ছোট ক্যাপে রূপান্তর করা উচিত বা না করা উচিত। ছোট ক্যাপগুলিতে সমস্ত ছোট হাতের অক্ষরগুলি বড় হাতের অক্ষরে রূপান্তরিত হয় এবং তাদের আকার ছোট হাতের অক্ষরের মতোই থাকে। বড় হাতের অক্ষরগুলি প্রভাবিত হয় না৷
−
-এর সিনট্যাক্স নিচে দেওয়া হলফন্ট ভ্যারিয়েন্ট প্রপার্টি −
সেট করা হচ্ছেobject.style.fontVariant = "normal|small-caps|initial|inherit"
উপরের সম্পত্তির মানগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -
| মান | বর্ণনা |
|---|---|
| স্বাভাবিক৷ | ফন্ট স্বাভাবিক অবস্থায় সেট করা আছে এবং এটি ডিফল্ট মান। |
| স্মল-ক্যাপস৷ | এটি ছোট বড় অক্ষরে ফর্মটি প্রদর্শন করে৷ |
| প্রাথমিক৷ | এই প্রপার্টিটিকে প্রারম্ভিক মানের জন্য ফরসেট করা হচ্ছে। |
| উত্তরাধিকার৷ | অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে প্রাপ্ত করুন৷ |
আসুন আমরা fontVariant propert -
-এর একটি উদাহরণ দেখিউদাহরণ
<!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="The font variant has been changed to small caps.";
}
</script>
</head>
<body>
<div id="demo1" >This is demo text</div>
<div id="demo2">This is demo text</div>
<p>Change the above text inside divs font variant property by clicking the below button</p>
<button onclick="changeFontVariant()">Change fontStyle </button>
<p id="Sample"></p>
</body>
</html> আউটপুট
"ফন্টের বৈকল্পিক পরিবর্তন করুন" ক্লিক করলে৷ বোতাম -
