W3docs
ru
Войти

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

Используйте свойство CSS text-rendering, чтобы выбрать между качеством текста и скоростью. Значения свойства и примеры.

Свойство CSS text-rendering указывает движку рендеринга браузера, что следует оптимизировать при отрисовке текста: скорость отрисовки, максимальную удобочитаемость или геометрическую точность. На практике это подсказка, позволяющая включать или отключать такие возможности шрифта, как кернинг (регулировка расстояния между определёнными парами букв) и лигатуры (объединение символов, например fi, в единый глиф).

На этой странице рассматривается, что делает каждое значение, когда имеет смысл его задавать, о чём следует помнить, а также приведены интерактивные примеры для сравнения.

Когда это нужно?

В большинстве случаев text-rendering не нужен — значение auto уже обеспечивает разумное поведение. К этому свойству прибегают в двух ситуациях:

  • Крупный, заметный текст (заголовки, главные надписи, логотипы), где хороший кернинг и лигатуры явно улучшают внешний вид. Для этого случая используется значение optimizeLegibility.
  • Длинные страницы с большим объёмом текста на слабых устройствах, где нужно избежать лишних типографских вычислений. Для этого предназначено значение optimizeSpeed.

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

  • auto — браузер решает самостоятельно (значение по умолчанию).
  • optimizeSpeed — приоритет скорости отрисовки; кернинг и лигатуры отключаются.
  • optimizeLegibility — приоритет удобочитаемости; кернинг и лигатуры включаются.
  • geometricPrecision — приоритет точной геометрии для плавного масштабирования текста.

При значении optimizeLegibility браузер ставит удобочитаемость на первое место, включая кернинг и лигатуры. Компромисс — производительность: на странице с большим количеством текста принудительная оптимизация читаемости может заметно замедлить рендеринг, поэтому применяйте его точечно, а не к элементу body.

Если вам нужен более тонкий контроль над отдельными типографскими возможностями вместо общей подсказки, используйте специализированные свойства font-kerning, font-variant-ligatures или font-feature-settings.

Свойство text-rendering изначально появилось в SVG, но теперь включено в спецификации CSS Text Module Level 3 и Level 4. Браузеры на движках Gecko (Firefox) и WebKit/Blink (Safari, Chrome) позволяют применять его к HTML-содержимому через CSS. Поскольку это свойство не является стандартизированным CSS-свойством повсеместно, рассматривайте его как прогрессивное улучшение: страница должна нормально выглядеть даже тогда, когда браузер его игнорирует.

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

Синтаксис

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

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

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

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

<!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>
Попробуйте сами »

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

Пример ниже демонстрирует разницу между значениями optimizeSpeed и optimizeLegibility. Наиболее наглядный эффект заметен на парах букв, которые выигрывают от кернинга и лигатур (например, AV, Wa или fi). Учтите, что результат может различаться в разных браузерах, а на тексте, который и без того отображается хорошо, видимых изменений может не быть вовсе:

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

<!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">AVADA Waffle — fi fl ffi (optimizeSpeed)</p>
    <p class="optimize-legibility">AVADA Waffle — fi fl ffi (optimizeLegibility)</p>
  </body>
</html>
Попробуйте сами »

На что обратить внимание

  • Это подсказка, а не гарантия. Браузеры могут интерпретировать или игнорировать text-rendering, а auto в некоторых движках уже включает оптимизацию читаемости для крупного текста. Не полагайтесь на это свойство для критически важных с точки зрения вёрстки результатов.
  • Производительность на большом тексте. optimizeLegibility на большом блоке текста может замедлить рендеринг и даже вызвать видимое мерцание при первой отрисовке. Применяйте его к конкретным элементам (заголовкам, коротким подписям), а не к body или *.
  • Свойство наследуется. Установка его на родительском элементе применяется ко всем потомкам — именно поэтому глобальное правило body { text-rendering: optimizeLegibility; } рискованно на страницах с большим объёмом текста.
  • По возможности предпочитайте стандартные свойства. Если нужен только кернинг или только лигатуры, font-kerning и font-variant-ligatures лучше специфицированы и более предсказуемы.

Значения

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

Связанные свойства

Если вы выполняете тонкую настройку типографики, следующие свойства дают более прямой контроль, чем общая подсказка text-rendering: font-kerning, font-variant-ligatures, font-feature-settings, font-family и letter-spacing.

Практика

Практика
Значение geometricPrecision свойства text-rendering указывает
Значение geometricPrecision свойства text-rendering указывает
Was this page helpful?