Thuộc tính font-family kiểu HTML DOM được sử dụng để thiết lập hoặc trả về danh sách phông chữ cụ thể cho phần tử đã chọn. Bạn nên sử dụng các phông chữ an toàn cho web và chỉ định các phông chữ bổ sung.
Sau đây là cú pháp cho -
Đặt thuộc tính fontFamily -
object.style.fontFamily = "font1, font2, etc.|initial|inherit"
Ở đây, font1, font2 là danh sách phông chữ được phân tách bằng dấu phẩy. Nếu không thể áp dụng phông chữ đầu tiên, thì phông chữ thứ hai sẽ được áp dụng, v.v. Ban đầu đặt giá trị thuộc tính thành giá trị mặc định trong khi kế thừa đặt nó thành giá trị thuộc tính mẹ.
Chúng ta hãy xem một ví dụ cho thuộc tính fontFamily -
Ví dụ
<!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> Đầu ra
Khi nhấp vào “ Thay đổi họ phông chữ Nút ”-
