HTML DOM style font 属性

htmlweb developmentfront end technology更新于 2024/3/14 22:04:17

HTML DOM style font 属性用于设置或获取字体样式、字体变量、字体粗细、字体大小、行高和字体系列这六个属性。字体大小和字体系列是必需属性值，它可以为所有其他缺失值设置默认值。

以下是返回字体属性 − 的语法

object.style.font

设置 style font 属性 −

值	描述
style	用于设置字体样式。
variant	用于设置文本为小写字母。
weight	用于指定字体的粗细。
size	用于指定字体大小。
lineHeight	用于指定行距。
family	用于设置字体。
caption	将字体应用于标题控件，例如按钮、下拉菜单等。
icon	用于指定标签图标字体。
menu	菜单中使用的字体
message-box	对话框中使用的字体
small-caption	小控件使用的字体
status-bar	将窗口状态栏字体设置为当前字体。
initial	将此属性设置为初始值。
inherit	继承父级属性值。

我们来看一个字体属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   .PARA1{
      font: oblique 5deg small-caps bold 1.3em/3 cursive;
   }
</style>
<script>
   function changeFont() {
      for(var i=0;i<2;i++){
         document.getElementsByClassName("PARA1")[i].style.font="italic bold 30px Verdana ";
      }
      document.getElementById("Sample").innerHTML="The text in the above two paragraphs is now    changed";
   }
</script>
</head>
<body>
   <p class="PARA1">This is demo text</p>
   <p class="PARA1">This is another demo text</p>
   <p>Change the above container div flex direction by clicking the below button</p>
   <button onclick="changeFont()">Change Font</button>
   <p id="Sample"></p>
</body>
</html>