HTML DOM 样式的 fontFamily 属性

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

HTML DOM 样式的 font-family 属性用于设置或返回所选元素的特定字体列表。建议使用网页安全字体并指定其他字体。

以下是语法 −

设置 fontFamily 属性 −

object.style.fontFamily = "font1, font2, etc.|initial|inherit"

其中，font1、font2 是以逗号分隔的字体列表。如果第一个字体无法应用，则应用第二个字体，依此类推。Initial 将属性值设置为默认值，而 Inherit 将其设置为父属性值。

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

示例

<!DOCTYPE html>
<html>
<head>
<style>
   li{
      font-size: 1.1em;
      background-color: snow;
      font-family: cursive;
   }
</style>
<script>
   function changeFontFamily() {
      for(var i=0;i<3;i++){
         document.getElementsByTagName("li")[i].style.fontFamily="Sans-Seriff";
      }
      document.getElementById("Sample").innerHTML="The font family for the above list is now set to    Helvetica";
   }
</script>
</head>
<body>
   <ul>
      <li>This is list item 1.</li>
      <li>This is list item 2</li>
      <li>This is list item 3</li>
   </ul>
   <p>Change the above list items font family by clicking the below button</p>
   <button onclick="changeFontFamily()">Change Font Family</button>
   <p id="Sample"></p>
</body>
</html>