Propriété CSS text-rendering

La propriété text-rendering fournit des informations au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte.

La propriété text-rendering possède quatre valeurs :

auto
optimizeSpeed
optimizeLegibility
geometricPrecision

Lorsque la propriété text-rendering est définie sur optimizeLegibility, le navigateur privilégie la lisibilité en activant le crénage et les ligatures.

La propriété text-rendering est issue de SVG mais est désormais incluse dans les spécifications CSS Text Module Level 3 et Level 4. Les navigateurs basés sur Gecko et WebKit permettent de l'appliquer au contenu HTML via CSS.

Valeur initiale	auto
S'applique à	Éléments de texte.
Héritée	Oui.
Animable	Oui.
Version	Scalable Vector Graphics (SVG) 1.1
Syntaxe DOM	object.style.textRendering = "optimizeLegibility";

Syntaxe

Valeurs CSS text-rendering

css

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

Exemple de la propriété text-rendering :

Exemple de code 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 différence entre "optimizeSpeed" et "optimizeLegibility"

L'exemple ci-dessous montrera la différence entre les valeurs "optimizeSpeed" et "optimizeLegibility". Notez que le résultat peut varier selon le navigateur que vous utilisez :

Exemple de la propriété text-rendering avec les valeurs "optimizeSpeed" et "optimizeLegibility" :

Exemple de la propriété text-rendering avec les valeurs "optimizeSpeed" et "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 »

Valeurs

Valeur	Description
auto	Le navigateur évalue quand optimiser la vitesse, la lisibilité et la précision géométrique lors du tracé du texte. Cette valeur est interprétée différemment selon les navigateurs.
optimizeSpeed	Spécifie que le navigateur doit privilégier la vitesse de rendu par rapport à la lisibilité et à la précision géométrique lors du tracé du texte. Le crénage et les ligatures sont désactivés.
optimizeLegibility	Spécifie que le navigateur doit privilégier la lisibilité par rapport à la vitesse de rendu et à la précision géométrique.
geometricPrecision	Spécifie que le navigateur doit privilégier la précision par rapport à la vitesse de rendu et à la lisibilité.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Practice

La valeur geometricPrecision de la propriété text-rendering spécifie

que le navigateur doit privilégier la lisibilité par rapport à la vitesse de rendu et à la précision géométrique.que le navigateur doit privilégier la vitesse de rendu par rapport à la lisibilité et à la précision géométrique lors du tracé du texte.que le navigateur doit privilégier la précision par rapport à la vitesse de rendu et à la lisibilité.

Propriété CSS text-rendering ​

Syntaxe ​

Exemple de la propriété text-rendering : ​

La différence entre "optimizeSpeed" et "optimizeLegibility" ​

Exemple de la propriété text-rendering avec les valeurs "optimizeSpeed" et "optimizeLegibility" : ​

Valeurs ​