Proprietà CSS text-rendering

La proprietà CSS text-rendering indica al motore di rendering del browser cosa ottimizzare quando disegna il testo: la velocità di disegno pura, la migliore leggibilità possibile o la precisione geometrica. In pratica è un suggerimento che consente di attivare o disattivare funzionalità tipografiche come il kerning (regolazione dello spazio tra coppie specifiche di lettere) e le legature (combinazione di caratteri come fi in un unico glifo).

Questa pagina illustra cosa fa ogni valore, quando vale la pena impostarlo, le insidie da tenere d'occhio ed esempi eseguibili che puoi confrontare fianco a fianco.

Quando si usa?

Per la maggior parte delle pagine non è mai necessario usare text-rendering — auto fa già un lavoro sensato. Si ricorre a questa proprietà in due situazioni:

Testo grande e prominente (intestazioni, titoli hero, loghi) dove un buon kerning e le legature migliorano visibilmente l'aspetto. Il valore da usare in questo caso è optimizeLegibility.
Pagine lunghe e sensibili alle prestazioni con molto testo su dispositivi poco potenti, dove si vuole evitare il lavoro tipografico extra. È questo lo scopo di optimizeSpeed.

La proprietà text-rendering ha quattro valori chiave:

auto — il browser decide (valore predefinito).
optimizeSpeed — privilegia la velocità di disegno; kerning e legature sono disabilitati.
optimizeLegibility — privilegia la leggibilità; kerning e legature sono abilitati.
geometricPrecision — privilegia la geometria precisa in modo che il testo possa essere scalato in modo uniforme.

Quando text-rendering è impostato su optimizeLegibility, il browser dà priorità alla leggibilità abilitando kerning e legature. Il compromesso è la prestazione: su una pagina con una grande quantità di testo, forzare la leggibilità può rallentare visibilmente il rendering, quindi applicatelo in modo selettivo piuttosto che a body.

Se desideri un controllo preciso sulle singole funzionalità tipografiche invece di un suggerimento generico, usa le proprietà dedicate font-kerning, font-variant-ligatures o font-feature-settings.

La proprietà text-rendering è nata in SVG, ma è ora inclusa nelle specifiche CSS Text Module Level 3 e Level 4. I browser basati su Gecko (Firefox) e quelli basati su WebKit/Blink (Safari, Chrome) consentono di applicarla ai contenuti HTML tramite CSS. Poiché non è una proprietà CSS standardizzata in tutti i browser, trattala come un miglioramento progressivo: la pagina deve comunque apparire correttamente quando il browser la ignora.

Valore iniziale	auto
Si applica a	Elementi di testo.
Ereditata	Sì.
Animabile	Sì.
Versione	Scalable Vector Graphics (SVG) 1.1
Sintassi DOM	object.style.textRendering = "optimizeLegibility";

Sintassi

Valori CSS text-rendering

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

Esempio della proprietà text-rendering:

Esempio di codice 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>

Provalo tu stesso »

La differenza tra "optimizeSpeed" e "optimizeLegibility"

L'esempio seguente mostra la differenza tra i valori optimizeSpeed e optimizeLegibility. L'effetto più evidente si nota sulle coppie di lettere che beneficiano del kerning e delle legature (come AV, Wa o fi). Tieni presente che il risultato può variare tra i browser e, su testo che già si renderizza bene, potresti non vedere alcuna differenza visibile:

Esempio della proprietà text-rendering con i valori "optimizeSpeed" e "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>

Provalo tu stesso »

Cose a cui prestare attenzione

È un suggerimento, non una garanzia. I browser possono interpretare o ignorare text-rendering, e auto abilita già la leggibilità per i testi grandi in alcuni motori. Non fare affidamento su di essa per risultati critici al layout.
Costo sulle prestazioni con testi lunghi. optimizeLegibility su un grande blocco di testo può rallentare il rendering e persino causare un flash visibile al primo caricamento. Applicala a elementi specifici (intestazioni, etichette brevi) piuttosto che a body o *.
È ereditata. Impostarla su un elemento padre la applica a tutti i discendenti, ed è esattamente per questo che un body { text-rendering: optimizeLegibility; } generale è rischioso su pagine con molto testo.
Preferisci le proprietà standard quando puoi. Per solo il kerning o solo le legature, font-kerning e font-variant-ligatures sono meglio specificate e più prevedibili.

Valori

Valore	Descrizione
auto	Il browser decide quando ottimizzare per velocità, leggibilità e precisione geometrica durante il disegno del testo. Questo valore viene interpretato diversamente dai vari browser.
optimizeSpeed	Specifica che il browser deve privilegiare la velocità di rendering rispetto alla leggibilità e alla precisione geometrica quando disegna il testo. Kerning e legature sono disabilitati.
optimizeLegibility	Specifica che il browser deve privilegiare la leggibilità rispetto alla velocità di rendering e alla precisione geometrica.
geometricPrecision	Specifica che il browser deve privilegiare la precisione rispetto alla velocità di rendering e alla leggibilità.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Proprietà correlate

Se stai ottimizzando la tipografia, queste proprietà ti danno un controllo più diretto rispetto al suggerimento generico di text-rendering: font-kerning, font-variant-ligatures, font-feature-settings, font-family e letter-spacing.

Esercizio

Pratica

Il valore geometricPrecision della proprietà text-rendering specifica

che il browser deve privilegiare la leggibilità rispetto alla velocità di rendering e alla precisione geometrica.che il browser deve privilegiare la velocità di rendering rispetto alla leggibilità e alla precisione geometrica quando disegna il testo.che il browser deve privilegiare la precisione rispetto alla velocità di rendering e alla leggibilità.