Mặc định phông chữ hệ thống của một hệ điều hành cụ thể có thể tăng hiệu suất vì trình duyệt không phải tải xuống bất kỳ tệp phông chữ nào mà nó đang sử dụng tệp phông chữ mà nó đã có. Tuy nhiên, điều đó đúng với bất kỳ phông chữ “web an toàn” nào. Vẻ đẹp của phông chữ "hệ thống" là nó phù hợp với những gì hệ điều hành hiện tại sử dụng, vì vậy nó có thể là một giao diện thoải mái.
Những phông chữ hệ thống đó là gì? Tại thời điểm viết bài này, nó được chia nhỏ như sau:
| Hệ điều hành | Phiên bản | Phông chữ hệ thống |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| các cửa sổ | Vista | Segoe UI |
| các cửa sổ | XP | Tahoma |
| các cửa sổ | 3.1 tới TÔI | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0) + | Roboto |
| Android | Cupcake (1.5) đến Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Tất cả các phiên bản | Ubuntu |
Tới đoạn mã, đã!
Lý do cho lời nói đầu là nó cho thấy mức độ sâu bạn có thể cần quay lại để hỗ trợ phông chữ hệ thống. Ngoài ra, nó giúp cho thấy rằng với các phiên bản hệ thống mới, các phông chữ mới sẽ xuất hiện và do đó có khả năng cần cập nhật ngăn xếp phông chữ của bạn.
Phương pháp 1: Phông chữ Hệ thống ở Cấp độ Yếu tố
Chrome và Safari gần đây đã xuất xưởng “system-ui” là một họ phông chữ chung có thể được sử dụng thay cho “-apple-system” và “BlinkMacSystemFont” trong các ví dụ sau. Mũ cho JJ để biết thông tin.Một phương pháp để áp dụng phông chữ hệ thống là gọi trực tiếp chúng trên một phần tử bằng thuộc font-familytính.
GitHub sử dụng phương pháp này trên trang web của họ, áp dụng phông chữ hệ thống trên bodyphần tử:
/* System Fonts as used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )Cả Medium và quản trị viên WordPress đều sử dụng cách tiếp cận tương tự, với một chút thay đổi, đáng chú ý nhất là hỗ trợ Oxygen Sans (được tạo cho hệ điều hành GNU + Linux) và Cantarell (được tạo cho hệ điều hành GNOME). Đoạn mã này cũng không hỗ trợ cho một số loại biểu tượng cảm xúc và biểu tượng:
/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )Lưu ý: Phương thức này chỉ nên được sử dụng trên thuộc font-familytính thay vì tốc fontký. Booking.com đã xuất bản một bài viết kỹ lưỡng về các cảnh báo mà nó tạo ra do phông chữ hàng đầu dường như là tiền tố nhà cung cấp.
Phương pháp 2: Ngăn xếp phông chữ hệ thống
Hạn chế của phương pháp đầu tiên là bạn phải gọi chồng phông chữ đầy đủ mỗi khi nó được sử dụng trên một phần tử và điều đó có thể trở nên cồng kềnh và cồng kềnh mã của bạn, tùy thuộc vào vị trí và cách nó được sử dụng.
Jonathan Neal đưa ra một phương pháp thay thế trong đó các phông chữ hệ thống được khai báo bằng cách sử dụng @font-face.
Lợi ích ở đây là bạn có thể khai báo các phông chữ một lần và sau đó điều đó trở thành thứ bạn có thể làm trên thuộc font-familytính thay vì danh sách dài các phông chữ mỗi lần như vậy.
/* Define the "system" font family */ @font-face ( font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )Lưu ý rằng ví dụ đầy đủ của Jonathan minh họa khả năng xác định các biến thể của họ systemphông chữ đã được xác định trong đoạn mã ở trên để giải thích cho chữ in nghiêng, in đậm và trọng số bổ sung.
Có liên quan
- Phông chữ dành riêng cho HĐH trong CSS - bao gồm một phương pháp JavaScript để kiểm tra phông chữ đang sử dụng.
- Phông chữ Hệ thống trong SVG
- Triển khai phông chữ hệ thống trên Booking.com - Bài học kinh nghiệm - Booking.com chia sẻ cách họ học được bằng cách sử dụng ngăn xếp phông chữ hệ thống trên tốc
fontký không hoạt động như mong đợi.