HTML/CSS | Tổng quan về font chữ

Học HTML, CSS từ Zero Tới Hero
  • Các chủng font phổ biến
  • Chủng font Serif
  • Chủng font San-Serif
  • Chủng font Monospace
  • Cách sử dụng fonts trong CSS

Các chủng font phổ biến

Chủng font Serif

Các font chữ thuộc chủng Serif là các font chữ có chân. Các font chữ phổ biến thuộc chủng Serif bao gồm: Times New Roman, Georgia, Garamond.

Xét về nguyên lý thiết kế, font chữ có chân giúp định hình mắt, hạn chế mỏi mắt khi đọc nhiều. Thường được dùng nhiều trong sách, báo, các bài blog, v.v.

Ví dụ, tại trang https://dantri.com.vn, dễ dàng thấy bên ngoài được sử dụng chủng font San-Serif để tạo cảm giác gọn gàng. Khi click vào nội dung bên trong mỗi bài viết, font chữ được sử dụng lại thuộc chủng Serif.

Chủng font San-Serif

Font chữ thuộc chủng San-Serif là font chữ không có chân. Các font chữ phổ biến thường là: Arial, Verdana, Garamond, v.v. Chủng font San-Serif được xem là phổ biến nhất và được dùng trên hầu hết các trang web.

Chủng font Monospace

Các font chữ thuộc chủng Monospace thường sẽ có độ rộng các ký tự bằng nhau. Ví dụ như font Monaco thuộc chủng Monospace thường được dùng rất nhiều trong các trình viết code.

Cách sử dụng fonts trong CSS

Để sử dụng font chữ trong CSS, sử dụng thuộc tính font-family.

Ví dụ:

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

Giá trị của thuộc tính font-family có thể là phông chữ theo tên hoặc họ phông chữ chung và có thể có cùng lúc nhiều phông chữ khác nhau.

Trong phạm vi bài học này chỉ tìm hiểu khái quát về cách sử dụng. Cụ thể về thuộc tính font-family sẽ được học kỹ hơn ở bài sau.

Tóm tắt

  • Top 3 kiểu font chữ phổ biến bao gồm: Serif, San-Serif, Monospace.
  • Font chữ thuộc chủng San-Serif không có chân. Các font phổ biến thường là: Arial, Verdana, Garamond, v.v.
  • Các font chữ thuộc chủng Serif sẽ có chân. Các font phổ biến bao gồm: Times New Roman, Georgia, Garamond.
  • Các font chữ thuộc chủng Monospace có độ rộng các ký tự bằng nhau, được sử dụng trong các trình viết code.
  • Để sử dụng font chữ trong CSS, cần sử dụng thuộc tính font-family.

Nhận xét

Mới hơn Cũ hơn