Tham chiếu phông chữ hệ thống CSS

Phông chữ trên một trang web có thể dễ dàng trở thành một phần lớn trong tổng kích thước gói mà các trình duyệt phải download trước khi có thể hiển thị một trang ở dạng và giao diện cuối cùng của nó. Thêm vào đó, ta cần phải lo lắng về tất cả những thứ như Flash of Unstyled Text (FOUT) khét tiếng. Tuy nhiên, có thể cho rằng một phần của toàn bộ vấn đề này đã được giải quyết, nhờ thuộc tính font-display .

Thêm vào đó là thực tế là văn bản được tìm thấy trên một trang web hầu như luôn là phần quan trọng nhất, vì vậy ta không muốn văn bản trông không ổn hoặc khó đọc. Một nhà thiết kế web hiểu biết phải làm gì để đáp ứng cả hiệu suất cũng như giao diện?

Một giải pháp là thực sự sử dụng phông chữ đã được cài đặt trên thiết bị của user . Trước đây, đó không phải là một giải pháp thanh lịch vì một số hệ thống phổ biến không đi kèm với các mặt phông chữ đẹp. Tuy nhiên, giờ đây mọi thứ đã khác, và mọi hệ điều hành chính đều có phông chữ hệ thống sans serif trông đẹp mắt.

Vì vậy, thủ thuật chỉ trở thành cung cấp tất cả các tên phông chữ hệ thống mặc định đó làm giá trị cho thuộc tính font-family cho (các) phần tử sẽ sử dụng phông chữ hệ thống. Sau đó, trình duyệt sẽ sử dụng cái đầu tiên mà nó có thể tìm thấy trên hệ thống hiện tại. Lưu ý điều này cũng nghĩa là văn bản sẽ trông khác dựa trên hệ thống mà nó đang được đọc. Tuy nhiên, đó không hẳn là một điều xấu, vì văn bản sẽ giống với hệ điều hành mà nó đang được đọc.

Ngăn xếp phông chữ hệ thống Sans Serif

Không cần phải quảng cáo thêm, đây là version của ngăn xếp phông chữ hệ thống được sử dụng trên chính trang web này:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
}

Ngăn xếp đó giống như ngăn xếp được sử dụng với WordPress và đã hoạt động khá tốt cho đến nay đối với nội dung trên Alligator.io. Trên trang web này, các tiêu đề sử dụng phông chữ biến đệ quy để có chút chỉnh chu hơn, nhưng bản thân nội dung sử dụng phông chữ hệ thống.

Dưới đây là bảng phân tích các phông chữ / từ khóa đó, nếu bạn tò mò:

-apple-system và BlinkMacSystemFont : Các từ khóa dùng để chỉ phông chữ hệ thống trên thiết bị Apple, thường là San Francisco hoặc Helvetica Neue, tùy thuộc vào version của hệ điều hành. Trên một số trình duyệt mới hơn, hệ thống từ khóa -ui hiện được dùng để thực hiện công việc của hai từ khóa đó.
Segoe UI : Được sử dụng trên hệ thống Windows.
Roboto : Phông chữ hệ thống cho thiết bị Android.
Oxygen-Sans : Hệ thống Linux sử dụng KDE.
Ubuntu : Ubuntu Linux
Cantarell : Hệ thống Linux sử dụng Gnome (ngoài Ubuntu).
Helvetica Neue : Một phông chữ dự phòng phổ biến có sẵn trên nhiều hệ thống (đặc biệt là hệ thống của Apple), đề phòng những cái trước đó đều bị lỗi.
sans-serif : Nếu vẫn thất bại, hãy dự phòng về phông chữ sans-serif mặc định của trình duyệt. Thường không phải là kết quả hài lòng nhất, do đó, tại sao ta không chỉ sử dụng font-family: sans-serif .

Như với hầu hết mọi thứ trong cuộc sống, có nhiều hương vị khác nhau của ngăn xếp phông chữ hệ thống và mỗi thứ lại thay đổi một chút. Ví dụ: đây là ngăn xếp mà GitHub sử dụng .

Ngăn xếp phông chữ hệ thống Monospace

Mặc dù không có ngăn xếp phông chữ hệ thống cho phông chữ dựa trên serif, nhưng có một ngăn xếp cho phông chữ monospace, có thể thực sự hữu ích cho các đoạn mã và tương tự. Đây là cái được Bootstrap v4 sử dụng (với GitHub cũng sử dụng version rất giống):

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", 
               "Courier New", monospace;
}

Phông chữ Hệ thống Sử dụng @ font-face

Trong trường hợp bạn cảm thấy mệt mỏi với việc lặp lại cùng một chuỗi nhiều tên phông chữ ở nhiều vị trí trong CSS của bạn , có một mẹo được ghi lại trong bài viết CSS-Tricks này để cho phép sử dụng luật @ font-face để xác định một tên đề cập đến toàn bộ ngăn xếp.

Tags:

Các tin liên quan

Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
Cách sử dụng CSS: root Pseudo-Class Selector
2020-01-15
Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12
Đặt, giãn cách và mật độ trong CSS Grid
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03