HTML/CSS | Fonts chữ hệ thống

Học HTML, CSS từ Zero Tới Hero

• Tổng quan về system fonts
• Cách sử dụng system fonts
• Lợi ích khi sử dụng system fonts
• Nhanh hơn so với tải fonts từ internet
• An toàn khi sử dụng
• Mang lại trải nghiệm quen thuộc

Tài nguyên sử dụng trong bài học:

• System Font Stack (css-tricks.com)

Tổng quan về system fonts

System fonts (fonts chữ hệ thống) là fonts chữ đã có sẵn trên các hệ điều hành, thiết bị. Thường được thấy khi mở các ứng dụng, trình duyệt web, giao diện điện thoại, máy tính, v.v.

Cách sử dụng system fonts

Có thể tìm kiếm Google với từ khóa “system fonts css” hoặc tham khảo ở các trang như:

• System Font Stack - css-tricks.com
• System Font Stack- digitalocean.com
• System Font Stack- https://systemfontstack.com/

Thêm font-family như sau vào selector body:

/* System Fonts with system-ui */
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Lợi ích khi sử dụng system fonts

Nhanh hơn so với tải fonts từ internet

Khi sử dụng fonts tải từ internet, trong trường hợp mạng chậm fonts sẽ chưa thể hiển thị đúng cho tới lúc tải xong.

Sử dụng fonts chữ hệ thống sẽ nhanh hơn, tối ưu hiệu suất hơn vì fonts hệ thống đã có sẵn nên được hiển thị ngay lập tức. Từ đó giúp nâng cao hiệu suất (performance) cho trang web vì không tốn thời gian tải fonts.

An toàn khi sử dụng

Sử dụng fonts chữ hệ thống được xem là an toàn vì có khoảng 18-20 fonts được cài sẵn trên các hệ điều hành quen thuộc như Windows, IOS, Linux, v.v nên sẽ đảm bảo hoạt động cho hầu hết người dùng.

Mang lại trải nghiệm quen thuộc

Fonts chữ hệ thống đã được cài sẵn trên điện thoại, máy tính. Người dùng đã tiếp xúc với nó hàng ngày, vì vậy khi tiếp xúc với các trang web sử dụng font chữ hệ thống sẽ có cảm giác gần gũi, quen thuộc.

Tóm tắt

• System fonts (fonts chữ hệ thống) là các fonts chữ đã được cài sẵn trên các thiết bị, hệ điều hành.
• Ưu điểm khi sử dụng: nhanh, an toàn và mang lại trải nghiệm quen thuộc.
• Để sử dụng system fonts, thêm font-family như sau vào selector body:

   /* System Fonts with system-ui */
   body {
     font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   }