Propriété CSS text-rendering

❮ Précédent Suivant ❯

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

La propriété text-rendering a cinq valeurs:

auto
optimizeSpeed
optimizeLegibility
geometricPrecision

Lorsque la propriété text-rendering est définie à "optimizeLegibility", les lettres majuscules successives deviennent plus espacées et les ligatures sont activées.

La propriété text-rendering n'est pas actuellement une propriété CSS et elle n'est pas définie en spécification CSS.

C'est une propriété SVG mais les navigateurs basés sur Gecko et WebKit permettent de l'appliquer au contenu HTML via CSS.

La propriété text-rendering ne fonctionne qu'en Windows et Linux.

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Le navigateur essaie de deviner quand optimiser la vitesse, la lisibilité et la précision géométrique lors du traçage de texte. Cette valeur est interprétée différemment par les navigateurs.
optimizeSpeed	Spécifie que le navigateur doit mettre l'accent sur la vitesse de rendu plutôt que sur la lisibilité et la précision géométrique lors de la création de texte. Le crénage et les ligatures sont désactivés.
optimizeLegibility	Spécifie que le navigateur doit mettre l'accent sur la lisibilité plutôt que sur la vitesse de rendu et la précision géométrique.
geometricPrecision	Spécifie que le navigateur doit mettre l'accent sur la précision plutôt que sur la vitesse et la lisibilité du rendu.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.