Font-family - Thủ thuật CSS

Các font-familybất động sản xác định phông chữ được áp dụng cho các thành phần được chọn. Phông chữ được chọn không phải là một mặt phông chữ duy nhất, mà là một “họ”, và do đó có thể phụ thuộc vào các giá trị thuộc tính kiểu chữ khác để chọn đúng mặt trong họ.

body ( font-family: Arial, Helvetica, sans-serif; )

Giá trị có thể là một trong những giá trị sau:

Họ phông chữ phù hợp với phông chữ được nhúng trên trang hoặc có sẵn trên hệ thống của người dùng.
Một loạt các họ, được phân tách bằng dấu phẩy, có thể bao gồm họ chung

Nếu nhiều họ được sử dụng, trình duyệt sẽ chọn họ đầu tiên mà nó tìm thấy được nhúng trên trang bằng cách sử dụng @font-facehoặc được cài đặt trên hệ điều hành của người dùng.

Vì font-familykhông có giá trị mặc định hoặc giá trị ban đầu cụ thể; giá trị ban đầu luôn phụ thuộc vào trình duyệt và / hoặc hệ điều hành.

Tên gia đình chung

Nếu nhiều giá trị được sử dụng cho một khai báo, bạn nên có một họ chung được liệt kê cuối cùng làm dự phòng để đảm bảo trải nghiệm đánh máy tốt nhất:

code ( font-family: Courier, Monaco, monospace; )

Trong ví dụ trên, “Courier” và “Monaco” là họ thực của các phông chữ thực tế, trong khi “monospace” chỉ là một tham chiếu chung cho bất kỳ phông chữ nào được cài đặt trên hệ thống của người dùng được monospaced.

Nếu hai phần đầu tiên không được cài đặt, trình duyệt sẽ chọn tùy chọn tốt nhất, nhưng chỉ từ các phông chữ monospace. Nếu không có họ chung, phông chữ sẽ được mặc định là phông chữ mặc định trên hệ thống của người dùng (có thể là serif hoặc sans-serif), điều này sẽ không được mong muốn.

Tên gia đình chung bao gồm serif, sans-serif, cursive, fantasy, và monospace.

Nếu một họ khớp với một họ chung chung, thì họ phải được trích dẫn để chỉ ra rằng họ không chung chung.

Tên gia đình nhiều từ

Nếu họ chứa nhiều từ, được phân tách bằng dấu cách, thì nên liệt kê họ trong dấu ngoặc kép (đơn hoặc kép):

code ( font-family: "Times New Roman", Georgia, serif; )

Điều này không phải lúc nào cũng cần thiết, nhưng nói chung sẽ an toàn hơn nếu bao gồm dấu ngoặc kép cho bất kỳ họ nào có khoảng trắng hoặc ký tự đặc biệt.