Phông chữ CSS
Việc chọn đúng phông chữ cho trang web của bạn rất quan trọng!
Lựa chọn phông chữ là quan trọng
Việc chọn đúng phông chữ có tác động rất lớn đến cách người đọc trải nghiệm một trang web.
Phông chữ phù hợp có thể tạo ra bản sắc mạnh mẽ cho thương hiệu của bạn.
Sử dụng phông chữ dễ đọc là điều quan trọng. Phông chữ thêm giá trị cho văn bản của bạn. Điều quan trọng nữa là chọn đúng màu sắc và kích thước văn bản cho phông chữ.
Họ phông chữ chung
Trong CSS có năm họ phông chữ chung:
- Phông chữ Serif có một nét nhỏ ở rìa mỗi chữ cái. Chúng tạo cảm giác trang trọng và sang trọng.
- Phông chữ Sans-serif có đường nét rõ ràng (không có nét nhỏ kèm theo). Chúng tạo ra một cái nhìn hiện đại và tối giản.
- Phông chữ đơn cách - ở đây tất cả các chữ cái đều có cùng chiều rộng cố định. Họ tạo ra một cái nhìn máy móc.
- Phông chữ chữ thảo bắt chước chữ viết tay của con người.
- Phông chữ tưởng tượng là phông chữ trang trí/vui tươi.
Tất cả các tên phông chữ khác nhau đều thuộc về một trong các họ phông chữ chung.
Sự khác biệt giữa phông chữ Serif và Sans-serif
Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif.
Một số ví dụ về phông chữ
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
Thuộc tính họ phông chữ CSS
Trong CSS, chúng tôi sử dụng thuộc tính font-family để chỉ định phông chữ của văn bản.
Lưu ý : Nếu tên phông chữ có nhiều hơn một từ thì phải để trong dấu ngoặc kép, chẳng hạn như: "Times New Roman".
Mẹo: Thuộc tính font-family phải chứa một số tên phông chữ làm hệ thống "dự phòng", để đảm bảo khả năng tương thích tối đa giữa các trình duyệt/hệ điều hành. Bắt đầu bằng phông chữ bạn muốn và kết thúc bằng họ phông chữ chung (để cho phép trình duyệt chọn một phông chữ tương tự trong họ phông chữ chung, nếu không có sẵn phông chữ nào khác). Tên phông chữ phải được phân tách bằng dấu phẩy. Đọc thêm về phông chữ dự phòng trong chương tiếp theo .
Ví dụ
Chỉ định một số phông chữ khác nhau cho ba đoạn văn:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
} Hãy tự mình thử »