如何使用 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+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告