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

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

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

auto
optimizeSpeed
optimizeLegibility
geometricPrecision

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

Свойство text-rendering изначально появилось в SVG, но теперь включено в спецификации CSS Text Module Level 3 и Level 4. Браузеры на движках Gecko и WebKit позволяют применять его к HTML контенту через CSS.

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

Синтаксис

Значения CSS text-rendering

css

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

Пример свойства text-rendering:

Пример кода CSS text-rendering

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 example</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>

Try it Yourself »

Разница между "optimizeSpeed" и "optimizeLegibility"

Пример ниже покажет разницу между значениями "optimizeSpeed" и "optimizeLegibility". Обратите внимание, что результат может отличаться в зависимости от используемого браузера:

Пример свойства text-rendering со значениями "optimizeSpeed" и "optimizeLegibility":

Пример свойства text-rendering со значениями "optimizeSpeed" и "optimizeLegibility":

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 1.5em;
        color: #777777;
      }
      .optimize-speed {
        text-rendering: optimizeSpeed;
      }
      .optimize-legibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <p class="optimize-speed">optimizeSpeed vs optimizeLegibility</p>
    <p class="optimize-legibility">optimizeSpeed vs optimizeLegibility</p>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Значение geometricPrecision свойства text-rendering указывает

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

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

Синтаксис ​

Пример свойства text-rendering: ​

Разница между "optimizeSpeed" и "optimizeLegibility" ​

Пример свойства text-rendering со значениями "optimizeSpeed" и "optimizeLegibility": ​

Значения ​