Phông chữ trong css

Vấn đề lựa chọn đúng phông chữ cho trang web của chúng ta là rất quan trọng!. Nó có tác động rất lớn đến cách người đọc trải nghiệm trang web.

Sử dụng phông chữ dễ đọc cũng là một điều quan trọng. Phông chữ làm tăng giá trị cho văn bản của chúng ta. hơn nữa, phông chữ phù hợp cũng có thể tạo ra một bản sắc mạnh mẽ cho thương hiệu website. Và một điều quan trọng nữa là chọn màu và kích thước hiển thị văn bản một cách chính xác cho từng phông chữ trên website.

Họ phông chữ chung

Trong CSS có năm họ font chữ chung:

Font 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.
Font 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.
Font chữ Monospace - 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.
Font chữ Cursive - Bắt chước chữ viết tay của chúng ta.
Font chữ Fantasy - 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 một trong các họ phông chữ chung ở trên.

Sự khác biệt giữa Phông chữ Serif và Sans-serif

font 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ữ

Họ Phông chữ Chung	Tên font chữ
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

CSS font-family

Trong CSS, chúng ta sử dụng thuộc tính font-family để chỉ định phông chữ cho 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".

Thuộc tính font-family nên được khai báo nhiều 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.

Ví dụ

<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>

Xem kết quả