Cú pháp của thuộc tính Font-Family
Thiết kế Typographic là một phần cực kỳ quan trọng của một thiết kế trang web thành công. Tạo trang web có văn bản dễ đọc và trông tuyệt vời là mục tiêu của mỗi chuyên gia thiết kế web. Để đạt được điều này, bạn sẽ cần để có thể thiết lập các phông chữ cụ thể mà bạn muốn sử dụng trên các trang web của bạn. Để chỉ định kiểu chữ hoặc họ phông chữ trên tài liệu Web của bạn, bạn sẽ sử dụng thuộc tính kiểu phông chữ cho gia đình trong CSS của bạn.
Kiểu phông chữ-gia đình đơn giản nhất mà bạn có thể sử dụng sẽ chỉ bao gồm một họ phông chữ:
p {font-family: Arial; }Nếu bạn áp dụng kiểu này cho một trang, tất cả các đoạn văn sẽ được hiển thị trong họ phông chữ "Arial". Điều này là tuyệt vời và vì "Arial" được gọi là "phông chữ an toàn trên web", có nghĩa là hầu hết (nếu không phải tất cả) máy tính đã được cài đặt, bạn có thể yên tâm biết rằng trang của bạn sẽ hiển thị trong phông chữ mong muốn .
Vậy điều gì xảy ra nếu bạn không thể tìm thấy phông chữ? Ví dụ: nếu bạn không sử dụng "phông chữ an toàn trên web" trên một trang, thì tác nhân người dùng sẽ làm gì nếu họ không có phông chữ đó? Họ thay người.
Điều này có thể dẫn đến một số trang tìm kiếm rất buồn cười. Tôi đã từng đến một trang nơi máy tính của tôi hiển thị hoàn toàn trong "Wingdings" (một bộ biểu tượng) vì máy tính của tôi không có phông chữ mà nhà phát triển đã chỉ định và trình duyệt của tôi đã chọn rất kém phông chữ sử dụng như một sự thay thế. Trang này hoàn toàn không đọc được cho tôi! Đây là nơi một phông chữ đi vào chơi.
Phân tách nhiều phông chữ gia đình bằng dấu phẩy trong ngăn xếp phông chữ
Một "font stack" là một danh sách các phông chữ mà bạn muốn trang của bạn sử dụng. Bạn sẽ đặt các lựa chọn phông chữ theo thứ tự ưu tiên của mình và tách riêng từng dấu phẩy bằng dấu phẩy. Nếu trình duyệt không có họ phông chữ đầu tiên trong danh sách, trình duyệt sẽ thử thứ hai và sau đó là thứ ba và tiếp tục cho đến khi tìm thấy nó có trên hệ thống.
họ phông chữ: Pussycat, Algeria, Broadway;Trong ví dụ trên, trước tiên, trình duyệt sẽ tìm phông chữ "Pussycat", sau đó là "Algeria" rồi đến "Broadway" nếu không tìm thấy phông chữ nào khác. Điều này mang lại cho bạn nhiều khả năng rằng ít nhất một trong các phông chữ bạn đã chọn sẽ được sử dụng. Nó không phải là hoàn hảo, đó là lý do tại sao chúng tôi có nhiều hơn chúng tôi có thể thêm vào font stack của chúng tôi (đọc trên!).
Sử dụng phông chữ chung cuối cùng
Vì vậy, bạn có thể tạo một chồng phông chữ với một danh sách các phông chữ và vẫn không có trình duyệt nào có thể tìm thấy. Bạn rõ ràng không muốn trang của bạn hiển thị không đọc được nếu trình duyệt tạo ra sự lựa chọn thay thế kém. May mắn là CSS có một giải pháp cho điều này: phông chữ chung .
Bạn nên luôn luôn kết thúc danh sách phông chữ của bạn (ngay cả khi nó là một danh sách của một gia đình hoặc chỉ phông chữ an toàn web) với một phông chữ chung chung. Có năm thứ bạn có thể sử dụng:
- chữ thảo
- tưởng tượng
- monospace
- sans serif
- serif
Hai ví dụ trên có thể được thay đổi thành:
họ phông chữ: Arial, sans-serif; font-family: Pussycat, Algeria, Broadway, tưởng tượng;Một số tên gia đình phông chữ là hai hoặc nhiều từ
Nếu họ phông chữ bạn muốn sử dụng nhiều hơn một từ, thì bạn nên bao quanh nó bằng dấu ngoặc kép. Mặc dù một số trình duyệt có thể đọc họ phông chữ mà không có dấu ngoặc kép, có thể có vấn đề nếu khoảng trắng bị cô đọng hoặc bị bỏ qua.
font-family: "Times New Roman", serif;Trong ví dụ này, bạn có thể thấy tên phông chữ "Times New Roman", có nhiều từ, được đặt trong dấu ngoặc kép. Điều này cho trình duyệt biết rằng cả ba từ này là một phần của tên phông chữ đó, trái ngược với ba phông chữ khác nhau, tất cả đều có tên một từ.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa ngày 12/2/16 bởi Jeremy Girard