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

❮ Назад Вперед ❯

Свойство text-rendering предоставляет информацию механизму визуализации о том, что нужно оптимизировать при рендеринге текста.

Свойство text-rendering имеет четыре значения:

auto
optimizeSpeed
optimizeLegibility
geometricPrecision

Если свойство text-rendering установлено в значение "optimizeLegibility", последующие буквы в верхнем регистре располагаются с интервалами и включается лигатура.

В самом деле, text-rendering не является CSS свойством и не указано в какой-либо CSS спецификации.

Это SVG свойство, но браузеры на основе gecko и WebKit позволяют применить свойство к HTML контенту при помощи CSS.

Свойство text-rendering работает только в Windows и Linux.

Значение по умолчанию	auto
Применяется	К текстовым элементам.
Наследуется	Да
Анимируемое	Да
Версия	Scalable Vector Graphics (SVG) 1.1
DOM синтаксис	object.style.textRendering = "optimizeLegibility";

Синтаксис

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-color: #eee;
      color: #000;
      font-size: 1em;
      font-family: 'Roboto', Helvetica, sans-serif;
      }
      hr {
      margin: 60px 0;
      }
      table {
      table-layout: fixed;
      padding: .3em;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
      margin-bottom: 1em;
      }
      td {
      padding: 15px;
      border: 1px solid #eee;
      }
      h3 {
      font-size: 5em;
      line-height: 1;
      font-family: sans-serif;
      }
      .uppercase {
      text-transform: uppercase;
      }
      .italic {
      font-style: italic;
      font-family: 'Roboto',Helvetica, sans-serif;
      }
      .optimizeLegibility {
      text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <h2>Пример text-rendering</h2>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="uppercase">LOREM</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility uppercase">LOREM</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3>Ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility">Ipsum</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="italic">lorem ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility italic">lorem ipsum</h3>
        </td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Браузер сам решает под какие параметры оптимизировать отображение текста (т. е. скорость, удобочитаемость, геометрическая точность отображения). Это значение интерпретируется браузерами по-разному.
optimizeSpeed	Браузер должен делать акцент на скорость рендеринга в ущерб удобочитаемости и геометрической точности. Кернинг и лигатуры отключены.
optimizeLegibility	Браузер должен делать акцент на удобочитаемость в ущерб скорости рендеринга и геометрической точности.
geometricPrecision	Браузер должен делать акцент на геометрическую точность в ущерб скорости рендеринга и удобочитаемости.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.