คุณสมบัติตระกูลแบบอักษร HTML DOM Style ใช้สำหรับการตั้งค่าหรือส่งคืนรายการแบบอักษรเฉพาะสำหรับองค์ประกอบที่เลือก ขอแนะนำให้ใช้แบบอักษรที่ปลอดภัยสำหรับเว็บและระบุแบบอักษรเพิ่มเติม
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ fontFamily -
object.style.fontFamily = "font1, font2, etc.|initial|inherit"
ที่นี่ font1, font2 เป็นรายการแบบอักษรคั่นด้วยเครื่องหมายจุลภาค ถ้าฟอนต์แรกใช้ไม่ได้ ก็จะใช้ฟอนต์ที่สองไปเรื่อยๆ Initial ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้นในขณะที่รับช่วงเป็นค่าคุณสมบัติหลัก
ให้เราดูตัวอย่างคุณสมบัติ 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> ผลลัพธ์
เมื่อคลิก “เปลี่ยนตระกูลแบบอักษร ปุ่ม −
