Thuộc tính HTML DOM Style fontVariant được sử dụng để thiết lập hoặc trả về nếu phông chữ có được chuyển đổi thành chữ hoa nhỏ hay không. Ở dạng viết hoa nhỏ, tất cả các chữ cái thường được chuyển thành chữ hoa với kích thước của chúng giống như chữ thường. Các chữ hoa vẫn không bị ảnh hưởng.
Sau đây là cú pháp cho -
Đặt thuộc tính fontVariant -
object.style.fontVariant = "normal|small-caps|initial|inherit"
Các giá trị thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| bình thường | Thefont được đặt thành bình thường và đây là giá trị mặc định. |
| small-caps | Nó hiển thị biểu mẫu bằng chữ in hoa nhỏ. |
| tên ban đầu | Đang xác nhận thuộc tính này về giá trị ban đầu. |
| kế thừa | Kế thừa giá trị thuộc tính mẹ |
Hãy để chúng tôi xem xét một ví dụ cho fontVariant thích hợp -
Ví dụ
<!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> Đầu ra
Khi nhấp vào “Biến thể thay đổi phông chữ” nút -
