Propiedad text-rendering de CSS

La propiedad text-rendering proporciona información al motor de renderizado sobre qué optimizar al representar texto.

La propiedad text-rendering tiene cuatro valores:

auto
optimizeSpeed
optimizeLegibility
geometricPrecision

Cuando la propiedad text-rendering se establece en optimizeLegibility, el navegador prioriza la legibilidad habilitando el kerning y los ligaduras.

La propiedad text-rendering se originó en SVG, pero ahora está incluida en las especificaciones CSS Text Module Level 3 y Level 4. Los navegadores basados en Gecko y WebKit permiten aplicarla al contenido de HTML a través de CSS.

Valor inicial	auto
Se aplica a	Elementos de texto.
Heredable	Sí.
Animable	Sí.
Versión	Scalable Vector Graphics (SVG) 1.1
Sintaxis DOM	object.style.textRendering = "optimizeLegibility";

Sintaxis

Valores de text-rendering en CSS

css

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

Ejemplo de la propiedad text-rendering:

Ejemplo de código 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 »

La diferencia entre "optimizeSpeed" y "optimizeLegibility"

El siguiente ejemplo mostrará la diferencia entre los valores "optimizeSpeed" y "optimizeLegibility". Tenga en cuenta que el resultado puede variar según el navegador que utilice:

Ejemplo de la propiedad text-rendering con los valores "optimizeSpeed" y "optimizeLegibility":

Ejemplo de la propiedad text-rendering con los valores "optimizeSpeed" y "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 »

Valores

Valor	Descripción
auto	El navegador intenta adivinar cuándo optimizar la velocidad, la legibilidad y la precisión geométrica al dibujar texto. Este valor se interpreta de manera diferente por los navegadores.
optimizeSpeed	Especifica que el navegador debe priorizar la velocidad de renderizado sobre la legibilidad y la precisión geométrica al dibujar texto. El kerning y los ligaduras se desactivan.
optimizeLegibility	Especifica que el navegador debe priorizar la legibilidad sobre la velocidad de renderizado y la precisión geométrica.
geometricPrecision	Especifica que el navegador debe priorizar la precisión sobre la velocidad de renderizado y la legibilidad.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

El valor geometricPrecision de la propiedad text-rendering especifica

que el navegador debe priorizar la legibilidad sobre la velocidad de renderizado y la precisión geométrica.que el navegador debe priorizar la velocidad de renderizado sobre la legibilidad y la precisión geométrica al dibujar texto.que el navegador debe priorizar la precisión sobre la velocidad de renderizado y la legibilidad.

Propiedad text-rendering de CSS ​

Sintaxis ​

Ejemplo de la propiedad text-rendering: ​

La diferencia entre "optimizeSpeed" y "optimizeLegibility" ​

Ejemplo de la propiedad text-rendering con los valores "optimizeSpeed" y "optimizeLegibility": ​

Valores ​