Text Rendering

Июнь 21, 2012 ||  css , font ||  комментарии

Свойство text-rendering определяет как браузеру оптимизировать рендеринг текста.

Возможные значения:

auto – как браузер на душу положит
optimizeSpeed – наверно не стоит пояснять
optimizeLegibility – качественное отображение важнее скорости, разрешает кернинг и лигатуры
geometricPrecision – акцент на геометрической точности, по идее самый затратный метод но дает наилучшие результаты.

Примеры

В реальности все немного запутанее (каждая строка текста это разный метод рендеринга, как перечислено на первом скрине):

Chrome 20, font: PT Serif

Firefox 14, font: PT Serif

В Firefox все выглядит одинаково, так как будто optimizeLegibility есть дефолтный метод, и неизменяемый.

Opera, font: PT Serif

В Опере ничего не работать, хотя modernizr говорит что поддержка text-rendering есть.

Еще пару скриншотов для Georgia.

Chrome 20, font: Georgia

Firefox 14, font: Georgia

Как видно для Georgia никакого кернинга нет, боюсь соврать но это похоже означает что сам шрифт должен содержать информацию о кернинговых парах, лигатурах и тд.

JS Bin

По теме:
comments powered by Disqus