Các text-renderingbất động sản trong CSS cho phép bạn chọn chất lượng của văn bản trên tốc độ (hoặc ngược lại) cho phép bạn tối ưu hóa tinh chỉnh bằng cách gợi ý cho trình duyệt như thế nào nó nên làm cho văn bản trên màn hình. Đã nói một cách khác trong MDN:
Các
text-renderingthuộc tính CSS cung cấp thông tin cho công cụ rendering về những gì để tối ưu hóa cho khi vẽ văn bản. Trình duyệt tạo ra sự cân bằng giữa tốc độ, tính dễ đọc và độ chính xác hình học.
Bạn có thể xem một số ví dụ trước / sau ở đây. Đôi khi kết quả chỉ là thẳng lên kerning tốt hơn:
Một số tệp phông chữ chứa thông tin bổ sung về cách phông chữ sẽ được hiển thị. optimizeLegibilitysử dụng thông tin này, và optimizeSpeedkhông sử dụng .
Thí dụ
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Hiệu suất
Khi người ta nói rằng có sự cân bằng giữa tốc độ và độ chính xác, họ không đùa. Có thể có các vấn đề hiệu suất đáng kể cần xem xét. Bài báo đó có giá trị trích dẫn toàn bộ:
Thực sự có những vấn đề hiệu suất nghiêm trọng, nghiêm trọng gây tử vong (chẳng hạn như độ trễ tải 30 giây hoặc lâu hơn) trên thiết bị di động khi sử dụng Tối ưu hóa cho các trang dài. Chỉ áp dụng nó nếu bạn biết độ dài văn bản tối đa sẽ là bao nhiêu. (Ngoài ra, hãy tránh sử dụng nó cho các ứng dụng khách Android, ít nhất là trên các phiên bản cũ hơn mà mọi người vẫn sử dụng: trình kết xuất phông chữ của nó thường có những lỗi rất lạ khi chế độ này được bật.)
Tôi đã thực hiện một số thử nghiệm với Instapaper để xác định giới hạn hiệu suất tối ưu hóa gần đúng. Ví dụ: một bài báo dài 5.000 từ trên Instapaper cho iOS sẽ chỉ sử dụng tính năng tối ưu hóa trên các thiết bị có CPU loại A5 trở lên. Để tránh các sự cố trên thiết bị iOS cũ hơn, tôi không khuyên bạn nên sử dụng tối ưu hóa một cách mù quáng và vô điều kiện trên bất kỳ trang nào dài hơn 1.000 từ. Và tôi không khuyên bạn nên bật nó trên Android.
Thật hấp dẫn để làm:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Nhưng hãy cẩn thận về điều đó, có vẻ nguy hiểm đặc biệt là khi áp dụng cho một trang tùy ý.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Có thể là hậu Blink? | Không | 2,3+? | 3+? |
Có nhiều lỗi khác nhau. Sự cố Android với các dòng mới. Chrome có nhiều loại, bao gồm cả khoảng cách giữa các chữ cái. Safari (và các ứng dụng khác) mặc định tối ưu hóa Tốc độ thay vì xác định nhanh chóng.