рендеринг текста

auto

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

optimizeSpeed

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

optimizeLegibility

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

geometricPrecision

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

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

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

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

text-rendering = 
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision  

Здесь показано, как 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 (в вашем браузере; в других браузерах может быть иначе).

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

• Атрибут SVG text-rendering

• SVG и CSS