CẬP NHẬT tháng 8 năm 2020
Bạn không còn cần phải nhắm mục tiêu Safari bằng truy vấn phương tiện để bật làm mịn phông chữ subpixel. Mặc định là ổn.
Tuy nhiên , mặc dù nó sử dụng làm mịn phông chữ subpixel theo mặc định, nhưng có một sự thay đổi đáng kể trong thuốc mỡ trong việc làm mịn phông chữ của Chrome , đối với bất kỳ ai đang tìm kiếm một kết xuất văn bản nhất quán .
- Đây là cách Chrome hiển thị văn bản sáng trên nền tối
- Đây là cách Chrome hiển thị văn bản tối trên nền sáng
Nhìn vào kích thước của tổng thể trong chữ e ở trên. Văn bản sáng trên nền tối được hiển thị với trọng lượng nặng hơn có thể cảm nhận được so với văn bản tối trên nền sáng (với kiểu phông chữ css giống hệt nhau).
Một giải pháp, đối với các trang web tôn trọng cài đặt chủ đề tối / sáng của người dùng, là nhắm mục tiêu Chrome bằng một truy vấn phương tiện được giới hạn ở chế độ tối và chuyển nó sang làm mịn không subpixel như sau:
@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
}
}
Kết quả :
Trọng lượng văn bản nhất quán hơn nhiều bất kể hiển thị ánh sáng trên bóng tối hay tối trên ánh sáng.
Kiểm tra so sánh song song của trước và sau:
-
CẬP NHẬT tháng 5 năm 2018
-webkit-font-smoothing: subpixel-antialiasedbây giờ không có hiệu lực trong Chrome nhưng trong Safari, nó vẫn cải thiện mọi thứ rất nhiều NHƯNG CHỈ DUY NHẤT KHI QUAY LẠI. Không có nó trong Safari trên màn hình retina, văn bản mỏng và vô vị, trong khi với nó, văn bản có trọng lượng thích hợp. Nhưng nếu bạn sử dụng tính năng này trên các màn hình không có võng mạc trong Safari, (đặc biệt là ở các giá trị trọng lượng nhẹ) thì văn bản là một thảm họa. Thực sự khuyên bạn nên sử dụng truy vấn phương tiện:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
Cài đặt rõ ràng -webkit-font-smoothing: subpixel-antialiasedlà giải pháp tốt nhất hiện tại nếu bạn muốn ít nhất một phần tránh được văn bản khử răng cưa mỏng hơn.
--tl; dr--
Với cả Safari và Chrome, nơi hiển thị phông chữ mặc định sử dụng khử răng cưa phụ, bất kỳ CSS nào buộc hiển thị dựa trên GPU, như các đề xuất ở trên sử dụng chuyển đổi bằng translateZ hoặc thậm chí chỉ là chuyển đổi tỷ lệ, sẽ khiến Safari và Chrome tự động "bỏ cuộc "trên cách làm mịn phông chữ subpixel-antialiased và thay vào đó chuyển sang chỉ văn bản khử răng cưa, trông nhẹ và mỏng hơn rất nhiều, đặc biệt là trên Safari.
Các phản hồi khác đã tập trung vào việc duy trì kết xuất liên tục bằng cách đơn giản đặt hoặc buộc làm mịn phông chữ cho văn bản mỏng hơn. Đối với mắt tôi, việc sử dụng translateZ hoặc backface ẩn làm giảm đáng kể chất lượng hiển thị văn bản và giải pháp tốt nhất nếu bạn muốn văn bản luôn nhất quán và bạn có thể sử dụng văn bản mỏng hơn -webkit-font-smoothing: antialiased. Tuy nhiên, cài đặt rõ ràng -webkit-font-smoothing: subpixel-antialiasedthực sự có một số ảnh hưởng - văn bản vẫn thay đổi một chút và mỏng hơn rõ ràng trong quá trình chuyển đổi được hiển thị trên GPU nhưng không mỏng như khi không có cài đặt này. Vì vậy, nó có vẻ như điều này ít nhất một phần ngăn chặn việc chuyển sang văn bản chống liên kết thẳng.