Giới thiệu
Thuộc tính font trong HTML DOM Style là shorthand dùng để thiết lập hoặc lấy sáu thuộc tính font cùng lúc: font-style, font-variant, font-weight, font-size, line-height và font-family. Trong đó font-size và font-family là bắt buộc, các giá trị còn lại nếu thiếu sẽ lấy mặc định.
Cú pháp
Lấy giá trị font:
object.style.font
Thiết lập font:
| Thành phần | Mô tả |
|---|---|
| style | Thiết lập font-style (normal, italic, oblique). |
| variant | Thiết lập small-caps. |
| weight | Chỉ định độ đậm (boldness) của font. |
| size | Chỉ định kích thước font (bắt buộc). |
| lineHeight | Chỉ định khoảng cách giữa các dòng (khi dùng kèm size: size/lineHeight). |
| family | Thiết lập font-face (bắt buộc). |
| caption | Font dùng cho các control như button, dropdown. |
| icon | Font dùng cho nhãn icon. |
| menu | Font dùng trong menu. |
| message-box | Font dùng trong hộp thoại. |
| small-caption | Font dùng cho control nhỏ. |
| status-bar | Font dùng cho thanh trạng thái cửa sổ. |
| initial | Đặt về giá trị mặc định. |
| inherit | Kế thừa từ phần tử cha. |
Ví dụ
Ví dụ thay đổi font shorthand cho hai đoạn văn.
<!DOCTYPE html> <html> <head> <style>
.PARA1{
font: oblique 5deg small-caps bold 1.3em/3 cursive;
}
</style> <script>
function changeFont() {
for(var i=0; i<2; i++){
document.getElementsByClassName("PARA1")[i].style.font = "italic bold 30px Verdana";
}
document.getElementById("Sample").innerHTML = "Văn bản trong hai đoạn trên đã được thay đổi";
}
</script> </head> <body>
<p class="PARA1">This is demo text</p>
<p class="PARA1">This is another demo text</p>
<p>Nhấn nút để thay đổi font shorthand</p>
<button onclick="changeFont()">Thay đổi Font</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Sau khi nhấn nút Thay đổi Font:
