text-renderingВластивість в CSS дозволяє вибрати якість тексту по швидкості (або навпаки) , що дозволяє для тонкої оптимізації мелодії, пропонуючи в браузер, який він повинен відображати текст на екрані. Інший спосіб зазначив у MDN:
text-renderingВластивість CSS надає інформацію рендеринга про те , що для оптимізації при візуалізації тексту. Браузер робить компроміси між швидкістю, розбірливістю та геометричною точністю.
Деякі приклади до / після ви можете переглянути тут. Іноді результат просто кращий кернінг:
Деякі файли шрифтів містять додаткову інформацію про те, як слід відображати шрифт. optimizeLegibilityвикористовує цю інформацію, optimizeSpeedале ні.
Приклад
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Продуктивність
Коли кажуть, що існує компроміс між швидкістю та точністю, вони не жартують. Тут можуть бути розглянуті значні проблеми з продуктивністю. Цю статтю варто повністю процитувати:
Насправді існують значні, фактично фатальні проблеми з продуктивністю (наприклад, затримка завантаження 30 секунд або довше) на мобільних пристроях при використанні optimizeLegability для довгих сторінок. Застосовуйте, лише якщо ви знаєте, якою буде максимальна довжина тексту. (Крім того, уникайте використання його для клієнтів Android, принаймні на старих версіях, якими все ще користуються всі: його візуалізатор шрифтів часто має дуже дивні помилки, коли цей режим увімкнено.)
Я провів тестування з Instapaper, щоб визначити приблизні межі продуктивності optimizeLegability. Наприклад, стаття з 5000 слів в Instapaper для iOS використовуватиме optimizeLegability лише на пристроях із ЦП класу A5 або вище. Щоб уникнути проблем на старих пристроях iOS, я б не рекомендував використовувати optimizeLegability наосліп та безумовно на будь-яких сторінках довжиною приблизно 1000 слів. І я б не рекомендував взагалі вмикати його на Android.
Заманливо зробити:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Але будьте обережні з цим, здається небезпечним, особливо якщо застосовувати до довільної сторінки.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Може, пост-Блинк? | Ні | 2,3+? | 3+? |
Є різні помилки. Випуск Android з новими рядками. Chrome має різні, включаючи інтервали між буквами. Safari (та інші) за замовчуванням оптимізують швидкість, а не визначають на льоту.