Phông chữ CSS
Chọn đúng phông chữ cho trang web của bạn là 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 một 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ữ làm tăng giá trị cho văn bản của bạn. Điều quan trọng nữa là chọn màu và kích thước văn bản chính xác 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ỏ ở các cạnh của mỗi chữ cái. Chúng tạo ra một 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 kèm theo các nét nhỏ). Chúng tạo ra một cái nhìn hiện đại và tối giản.
- Phông chữ Monospace - ở đây tất cả các chữ cái có cùng chiều rộng cố định. Chúng tạo ra một cái nhìn máy móc.
- Phông chữ viết tay 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 thuộc 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 font-familytính để 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ừ, nó phải nằm trong dấu ngoặc kép, như: "Times New Roman".
Mẹo: Thuộc font-familytính nên giữ một số tên phông chữ như một 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 với phông chữ bạn muốn và kết thúc bằng một họ chung (để cho phép trình duyệt chọn một phông chữ tương tự trong họ chung, nếu không có sẵn các phông chữ khác). Tên phông chữ nên đượ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 .
Thí 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;
}