如何使用 JavaScript 設定文字的字體系列？

在本教程中，我們將學習如何使用 JavaScript 設定文字的字體系列。

font-family 是一個 CSS 屬性，它指定一個優先順序列表，其中包含一個或多個字體系列名稱和 HTML 元素文字的通用系列名稱。要使用 JavaScript 設定文字的字體系列，有多種方法，在本教程中，我們將討論其中兩種：

  • 使用 style.fontFamily 屬性

  • 使用 style.setProperty 方法

使用 style.fontFamily 屬性

style.fontFamily 屬性設定文字的字體系列名稱和/或通用系列名稱列表。瀏覽器將設定列表中它識別的第一個值。元素物件包含此屬性，因此首先，使用 document.getElementById() 方法訪問元素物件，然後我們使用 style.fontFamily 屬性來使用 JavaScript 設定文字的字體系列。

語法

const element = document.getElementById('id')
element.style.fontFamily = family_name | generic_family | inherit | initial

在上面的語法中，“id”是元素的 id。我們使用 document.getElementById() 方法訪問該元素物件並設定 style.fontFamily 屬性。

引數

  • family_name − 一個或多個字體系列的名稱。

  • generic_family − 一個或多個通用系列的名稱。

  • inherit − 字體系列屬性由其父元素的屬性繼承。

  • initial − 字體系列屬性設定為預設值。

示例

在下面的示例中，我們使用了 style.fontFamily 屬性來使用 JavaScript 設定文字的字體系列。我們使用了一個“設定字體系列”按鈕的點選事件來執行“setFontFamily()”函式，該函式設定多個元素的 font-family 屬性。

<html>
<head>
   <style>
      div {
         padding: 10px;
         margin: 5px 0px;
         background-color: aliceblue;
      }
   </style>
</head>
<body>
   <h3> Set the font family for text using <i> style.fontFamily property </i> with JavaScript </h3>
   <button onclick="setFontFamily()"> Set Font Family </button>
   <br /><br />
   <div id="text1"> This text will use Arial font family </div>
   <div id="text2"> This text will use cursive font family </div>
   <div id="text3"> This text will use Helvetica, sans-serif font family </div>
   <div id="text4"> This text will use Georgia, serif font family </div>
   <script>
      
      // 'Set Font Family' button click event handler function
      function setFontFamily() {
         
         // all text elements
         const text1 = document.getElementById('text1')
         const text2 = document.getElementById('text2')
         const text3 = document.getElementById('text3')
         const text4 = document.getElementById('text4')
         
         // Set the font-family property using the style.fontFamily property
         text1.style.fontFamily = 'Arial'
         text2.style.fontFamily = 'cursive'
         text3.style.fontFamily = 'Helvetica, sans-serif'
         text4.style.fontFamily = 'Georgia, serif'
      }
   </script>
</body>
</html>

使用 style.setProperty 方法

在 JavaScript 中，可以使用 style.setProperty 方法設定 HTML 元素的新屬性或現有屬性。style.setProperty 方法是元素物件的一部分，因此要使用此方法，我們需要使用 document.getElementById() 方法訪問元素物件，然後才能使用此方法。在 style.setProperty 方法的屬性名稱引數中，它應該是“font-family”，值和優先順序將根據使用者而定。

語法

const element = document.getElementById('id')
element.style.setProperty(property_name, value, priority)

在上面的語法中，我們使用 document.getElementById() 方法訪問具有 id 為“id”的 HTML 元素的元素物件，然後使用 style.setProperty 方法。

引數

  • property_name − 要設定的屬性的名稱。

  • value − 屬性的新值。

  • priority − 屬性值的優先順序（可選）。

示例

在下面的示例中，我們使用了 style.setProperty 方法來使用 JavaScript 設定文字的字體系列。我們使用了一個輸入欄位來獲取使用者的字體系列列表輸入。一個“設定字體系列”按鈕與一個點選事件相關聯，該事件執行“setFontFamily()”函式，該函式設定元素的字體系列。

<html>
<head>
   <style>
      div {
         padding: 10px;
         margin: 5px 0px;
         background-color: aliceblue;
      }
   </style>
</head>
<body>
   <h2> Set the font family for text using <i> style.setProperty method </i> with JavaScript </h2>
   <h4>Enter the list of font-families to set:</h4>
   <input id="fonts" type="text" name="fonts" value="sans-serif">
   <button onclick="setFontFamily()"> Set Font Family </button>
   <br /><br />
   <div id="text"> This text will change it's font family according to the user's input! </div>
   <script>
      
      // 'Set Font Family' button click event handler function
      function setFontFamily() {
         const text = document.getElementById('text')
         
         // input field's value
         const fonts = document.getElementById('fonts').value
         
         // Set the font-family property using the style.setProperty method
         text.style.setProperty('font-family', fonts)
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用 JavaScript 設定文字的字體系列。我們已經看到了兩種設定字體系列的方法：使用 style.fontFamily 屬性和使用 style.setProperty 方法。使用者可以遵循這些方法來設定文字的字體系列。

更新於：2022年11月11日

7K+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告