HTML DOM Style fontVariant 属性

htmlweb developmentfront end technology更新于 2024/3/15 0:44:17

HTML DOM Style fontVariant 属性用于设置或返回字体是否应转换为小型大写字母。在小型大写字母中，所有小写字母都会转换为大写字母，其大小与小写字母相同。大写字母不受影响。

以下是语法 −

设置 fontVariant 属性 −

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

以上属性值的解释如下 −

值	描述
normal	字体设置为 normal，这是默认值。
small-caps	以小写字母显示表单。
initial	将此属性设置为初始值。
inherit	继承父级属性值

让我们看一个 fontVariant 属性的示例 −

示例

<!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>