text-renderingСвойство в CSS позволяет выбрать качество текста по скорости (или наоборот) , что позволяет для тонкой оптимизации мелодии, предлагая в браузер, какой он должен отображать текст на экране. Сказал другой способ в MDN:
Свойство
text-renderingCSS предоставляет механизму визуализации информацию о том, что нужно оптимизировать при визуализации текста. Браузер делает компромисс между скоростью, удобочитаемостью и геометрической точностью.
Вы можете увидеть некоторые примеры до и после здесь. Иногда получается просто лучший кернинг:
Некоторые файлы шрифтов содержат дополнительную информацию о том, как шрифт должен отображаться. optimizeLegibilityиспользует эту информацию и optimizeSpeedне делает этого.
Пример
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Спектакль
Когда говорят, что существует компромисс между скоростью и точностью, они не шутят. Могут возникнуть серьезные проблемы с производительностью. Эту статью стоит процитировать целиком:
На самом деле при использовании optimizeLegibility для длинных страниц на мобильных устройствах возникают серьезные, по сути, фатальные проблемы с производительностью (например, 30-секундная задержка загрузки или более). Применяйте его, только если знаете, какой будет максимальная длина текста. (Кроме того, избегайте использования его для клиентов Android, по крайней мере, в более старых версиях, которые все еще используют: его средство визуализации шрифтов часто имеет очень странные ошибки, когда этот режим включен.)
Я провел небольшое тестирование с Instapaper, чтобы определить приблизительные пределы производительности optimizeLegibility. Например, статья на 5000 слов в Instapaper для iOS будет использовать optimizeLegibility только на устройствах с процессором класса A5 или выше. Чтобы избежать проблем на старых устройствах iOS, я бы не рекомендовал слепо и безоговорочно использовать optimizeLegibility на любых страницах, длина которых превышает 1000 слов. И я бы вообще не рекомендовал включать его на Android.
Заманчиво сделать:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Но будьте осторожны с этим, это кажется опасным, особенно когда применяется к произвольной странице.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Может пост-блинк? | Неа | 2.3+? | 3+? |
Есть разные баги. Проблема Android с новыми строками. В Chrome есть разные, в том числе и межбуквенный интервал. Safari (и другие) по умолчанию использует optimizeSpeed, а не определяет на лету.