Thuộc tính font-family trong CSS

Định nghĩa và cách sử dụng

font-family quy định họ font của phần tử.

font-family có thể lưu trữ nhiều tên font như một hệ thống "hồi đáp" để sử dụng. Nếu trình duyệt không hỗ trợ font đầu tiên, nó sẽ thử font tiếp theo. Nghĩa là giá trị của thuộc tính font-family là danh sách ưu tiên của tên họ font hoặc và tên họ loại font cho một phần tử cụ thể. Trình duyệt sẽ sử dụng giá trị đầu tiên mà nó có thể nhận diện.

Có hai loại tên họ font:

  • Tên họ series được chỉ định: tên cụ thể của font, ví dụ: "times"、"courier"、"arial".
  • Tên họ font phổ biến: ví dụ: "serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

Lưu ý:Chia tách mỗi giá trị bằng dấu phẩy và luôn luôn cung cấp một tên họ loại font làm lựa chọn cuối cùng.

Lưu ý:Việc sử dụng một họ font cụ thể (Geneva) hoàn toàn phụ thuộc vào việc họ font đó có sẵn trên máy của người dùng hay không; thuộc tính này không chỉ ra bất kỳ font nào được tải xuống. Do đó, rất khuyến cáo sử dụng một tên họ font phổ biến làm con đường dự phòng.

Xem thêm:

Hướng dẫn CSS:Phông chữ CSS

Hướng dẫn tham khảo CSS:Thuộc tính font trong CSS

Hướng dẫn tham khảo HTML DOM:Thuộc tính font

Ví dụ

Thiết lập font cho đoạn văn:

p
  {
  font-family:"Times New Roman",Georgia,Serif;
  }

Thử ngay

Ngữ pháp CSS

font-family: family-name|generic-family|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
  • family-name
  • generic-family

Danh sách ưu tiên của tên họ font hoặc và tên họ loại font cho một phần tử cụ thể.

Giá trị mặc định: tùy thuộc vào trình duyệt.
inherit Định nghĩa rằng hệ thống font nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: chưa xác định
Kế thừa: yes
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.fontFamily="arial,sans-serif"

Thử ngay

Thiết lập font văn bản
Ví dụ này minh họa cách thiết lập font văn bản.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5