CSS-свойство `text-rendering`

Свойство text-rendering CSS сообщает механизму отрисовки, какие параметры следует оптимизировать при отображении текста.

Браузер находит компромисс между скоростью, удобочитаемостью и геометрической точностью.

Один из заметных эффектов — optimizeLegibility, которое включает лигатуры (ff, fi, fl и т. д.) в тексте размером меньше 20px для некоторых шрифтов (например, Calibri, Candara, Constantia и Corbel от Microsoft, а также для семейства шрифтов DejaVu).

Синтаксис

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: revert;
text-rendering: revert-layer;
text-rendering: unset;

Значения

auto

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

Значение auto — хороший вариант по умолчанию для баланса качества и производительности, особенно для длинных блоков обычного текста.

optimizeSpeed

При отображении текста браузер отдает предпочтение скорости отрисовки, а не удобочитаемости и геометрической точности. Кернинг и лигатуры отключаются.

Значение optimizeSpeed предпочтительно в условиях ограниченных ресурсов, например при использовании медленных процессоров или низком заряде батареи.

optimizeLegibility

Браузер отдает предпочтение удобочитаемости, а не скорости отрисовки и геометрической точности. Это включает кернинг и необязательные лигатуры.

Значение optimizeLegibility предпочтительно для крупного, но короткого текста, например заголовков или баннеров, чтобы повысить его читаемость. Его также можно использовать для высококачественной профессиональной типографики, например в публикуемых статьях. Для обычных статей оно не рекомендуется из-за возможного снижения производительности.

geometricPrecision

Браузер отдает предпочтение геометрической точности, а не скорости отрисовки и удобочитаемости. Некоторые характеристики шрифтов — например, кернинг — масштабируются нелинейно. Поэтому это значение может улучшить внешний вид текста с такими шрифтами.

В SVG при увеличении или уменьшении масштаба текста браузеры вычисляют его окончательный размер (определяемый заданным размером шрифта и примененным масштабом) и запрашивают шрифт этого вычисленного размера в системной подсистеме шрифтов. Но если запросить размер шрифта, например, 9 при масштабе 140%, полученный размер шрифта 12.6 явно не поддерживается подсистемой шрифтов, поэтому браузер округляет его до 12. В результате текст масштабируется ступенчато.

Однако свойство geometricPrecision — при полной поддержке со стороны механизма отрисовки — позволяет плавно масштабировать текст. При большом коэффициенте масштабирования текст может отображаться не так красиво, как хотелось бы, но его размер будет ожидаемым: он не будет округлен вверх или вниз до ближайшего размера шрифта, поддерживаемого Windows или Linux.

Значение geometricPrecision не оптимизирует ни читаемость, ни производительность. Обычно оно полезно в SVG, когда графика должна масштабироваться без искажения размеров текста.

Примечание: WebKit точно применяет указанное значение, а Gecko обрабатывает его так же, как optimizeLegibility.

Формальное определение

Формальный синтаксис

text-rendering = 
  auto |
  optimizeSpeed |
  optimizeLegibility |
  geometricPrecision

Примеры

Автоматическое применение optimizeLegibility

В этом примере показано, как браузеры автоматически используют optimizeLegibility, когда font-size меньше 20px.

HTML

<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

CSS

.small {
  font:
    19.9px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

Результат

optimizeSpeed и optimizeLegibility

В этом примере показана разница во внешнем виде optimizeSpeed и optimizeLegibility (в вашем браузере; в других браузерах результат может отличаться).

HTML

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

CSS

p {
  font:
    1.5em "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

.speed {
  text-rendering: optimizeSpeed;
}
.legibility {
  text-rendering: optimizeLegibility;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Отрисовка текста в <canvas>
• Оформление текста CSS — модуль CSS
• Связанные свойства CSS
  • text-decoration (и его свойства для отдельных компонентов, такие как text-decoration-line, text-decoration-style и text-decoration-thickness)
  • text-emphasis (и его свойства для отдельных компонентов, включая text-emphasis-color, text-emphasis-position и text-emphasis-style)
  • text-shadow
  • text-transform
• Атрибут text-rendering из SVG
• SVG и CSS