如何使用 JavaScript 设置文本的字体系列?
在本教程中，我们将学习如何使用 JavaScript 设置文本的字体系列。
font-family 是一个 CSS 属性，它指定一个优先级列表，其中包含一个或多个 font family 名称和 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 − font-family 属性由其父元素的属性继承。
initial − font-family 属性设置为 default。
示例
在下面的示例中，我们使用 style.fontFamily 属性通过 JavaScript 设置文本的字体系列。我们使用按钮"设置字体系列"单击事件来执行设置多个元素的字体系列属性的"setFontFamily()"函数。
<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 方法设置字体系列的两种方法。用户可以按照这些方法来设置文本的字体系列。
