Thuộc tính font-family
Thuộc tính font-family thiết lập
kiểu phông chữ.
Cú pháp
bộ chọn {
font-family: tên phông chữ;
}
Lưu ý
Nếu tên phông chữ có chứa khoảng trắng, ví dụ, Times New Roman, nó phải được đặt trong dấu nháy đơn hoặc nháy kép.
Lưu ý
Có thể liệt kê nhiều phông chữ tương tự nhau thông qua dấu phẩy. Khi trình duyệt gặp phông chữ đầu tiên trong danh sách, nó kiểm tra sự có mặt của nó trên máy tính của người dùng. Nếu không có phông chữ đó, phông chữ tiếp theo trong danh sách sẽ được lấy và cũng được phân tích về sự hiện diện. Vì vậy, việc liệt kê nhiều phông chữ làm tăng khả năng ít nhất một trong số chúng sẽ được tìm thấy trên máy tính của máy khách.
Thông thường kết thúc danh sách bằng một từ khóa,
mô tả kiểu phông chữ (tất cả phông chữ
thuộc về một kiểu nào đó) - serif,
sans-serif, cursive, fantasy
hoặc monospace.
Nếu trình duyệt không tìm thấy bất kỳ phông chữ nào được chỉ định
trên máy tính của người dùng, thì nó
sẽ chọn một trong các phông chữ thuộc kiểu đã chỉ định.
Các kiểu phông chữ
| Kiểu | Mô tả |
|---|---|
serif |
Phông chữ có chân (serif). |
sans-serif |
Phông chữ không chân. |
cursive |
Phông chữ viết tay (nghiêng). |
fantasy |
Phông chữ trang trí với các đường xoăn đẹp và hiệu ứng bất thường. |
monospace |
Phông chữ đơn cách (monospace), chiều rộng của mỗi ký tự là như nhau. |
Giá trị mặc định: phông chữ được thiết lập mặc định trong trình duyệt. Thông thường là Times New Roman.
Ví dụ
Gán cho phông chữ họ Arial:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: Arial;
}
:
Ví dụ
Gán cho phông chữ họ Times New Roman. Vì tên phông chữ bao gồm nhiều từ, nên đặt nó trong dấu nháy:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: "Times New Roman";
}
:
Ví dụ
Gán cho phông chữ một phông chữ từ nhóm serif
(rất có thể sẽ lấy Times New Roman):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: serif;
}
:
Ví dụ
Gán cho phông chữ một phông chữ từ nhóm sans-serif
(rất có thể sẽ lấy Arial):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: sans-serif;
}
:
Ví dụ
Gán cho phông chữ một phông chữ từ nhóm fantasy
(có thể không hoạt động trên máy bạn do thiếu
phông chữ này):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: fantasy;
}
:
Ví dụ
Gán cho phông chữ một phông chữ từ nhóm monospace
(các chữ cái sẽ có kích thước bằng nhau):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: monospace;
}
: