คุณสมบัติ HTML DOM Style fontFamily

คุณสมบัติ HTML DOM Style font-family ใช้สำหรับตั้งค่าหรือส่งคืนรายการฟอนต์เฉพาะสำหรับองค์ประกอบที่เลือก แนะนำให้ใช้ web-safe fonts และระบุฟอนต์สำรองเพิ่มเติม

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ fontFamily:

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

ที่นี่ font1, font2 เป็นรายการฟอนต์ที่คั่นด้วยเครื่องหมายจุลภาค หากฟอนต์แรกใช้ไม่ได้ จะลองใช้ฟอนต์ที่สอง ตามลำดับ initial ตั้งค่าเป็นค่าเริ่มต้น ในขณะที่ inherit ตั้งค่าเป็นค่าของพาเรนต์

ตัวอย่างการใช้งาน

<!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-Serif"; 
        } 
        document.getElementById("Sample").innerHTML = "Font family ของรายการด้านบนตั้งเป็น 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>คลิกปุ่มด้านล่างเพื่อเปลี่ยน font family ของรายการด้านบน</p> 
    <button onclick="changeFontFamily()">เปลี่ยน Font Family</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

เมื่อคลิกปุ่ม "เปลี่ยน Font Family":