Trên thực tế, kiểu chữ San Francisco có xuất xưởng dưới dạng phông chữ có thể thay đổi

Apple Tiết lộ một phiên bản mở rộng của phông chữ hệ thống San Francisco của nó tại WWDC 2022. Sau đó, vào tháng trước, Jim Nielsen đã sửa đổi các biến thể của phông chữ, giải thích cách phông chữ cung cấp một loạt các biến thể dựa trên chiều rộng và trọng lượng. Đó là một bài đọc đáng chú ý nếu bạn chưa kiểm tra nó.

Với tất cả các tùy chọn mới tuyệt vời này, bạn có thể bị cám dỗ để sử dụng chúng trong thiết kế web. Chris đã ogling trên các tập hợp mở rộng là tốt trên blog cá nhân của mình và suy nghĩ:

Nhưng vẫn chưa rõ bằng cách nào chúng ta có thể khai thác các giống cô đọng, nén và mở rộng trong CSS hoặc thậm chí có kế hoạch cho phép điều đó. Tôi cho rằng cuối cùng chúng ta cũng có thể xem qua Apple.com và xem cách họ thực hiện nếu họ bắt đầu sử dụng chúng ở đó.

Điều này không có ý nghĩa hoàn hảo khi xây dựng như một phông chữ có thể thay đổi và vận chuyển toàn bộ bộ công cụ và hình tượng trưng theo cách đó?

Hóa ra là có. Nó có ý nghĩa hoàn hảo. Chris theo dõi trong một bài viết mới:

Nhưng mới hôm qua, tôi ngẫu nhiên tình cờ phát hiện ra rằng phông chữ San Francisco tích hợp sẵn (trên các thiết bị Apple có tích hợp sẵn nó) đã có thể thay đổi (!!). Thấy chưa, tôi đã chạy vòng quanh với Roboto Flex, và đã system-ui là phông chữ dự phòng và tôi nhận thấy rằng trong quá trình FOUT, font-variation-settings Tôi đang sử dụng có ảnh hưởng đến phông chữ dự phòng, phông chữ này hiển thị là San Francisco trên máy Mac của tôi. Mà… trừ khi tôi không hiểu… nghĩa là San Francisco là một phông chữ có thể thay đổi.

Vì vậy, như để sử dụng nó? Chris có một bản demo, tất nhiên:

Có một số vấn đề cần giải quyết đối với tất cả những điều này, quan trọng nhất là dự phòng cho các thiết bị không phải của Apple. Rốt cuộc, bản demo đó chỉ đơn giản là gọi system-ui đối với họ phông chữ - nó không yêu cầu trình duyệt tải xuống tệp phông chữ hoặc bất cứ thứ gì và ai biết được liệu Apple có bao giờ gửi tệp phông chữ có thể thay đổi mà chúng tôi có thể phục vụ như một phông chữ web tùy chỉnh thực tế hay không.

Điều thú vị khác? Chris đã thực hiện một số thao tác và đếm được 35 bố cục có trong phông chữ hệ thống đó. Đi Đọc phần còn lại của bài viết để xem tất cả chúng (và để có được một liều thuốc Chris-isms tốt - tôi biết tôi nhớ chúng!).

Liên kết trực tiếp & rarr;