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.

Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique.

/* Avec un mot-clé */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Valeurs globales */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;

Note : La propriété text-rendering est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML sur Windows, Mac OS X et Linux.

Un effet très visible est : text-rendering : optimizeLegibility; qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, Calibri, Candara, Constantia et Corbel de Microsoft, ou la famille DejaVu).

Valeur initialeauto
Applicabilitééléments textes
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

auto
Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.
optimizeSpeed
Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.
optimizeLegibility
Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.
geometricPrecision

Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc geometricPrecision peut rendre agréables à l'œil les textes utilisant ces polices.

Avec SVG, lorsque le texte est agrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.

Toutefois la propriété geometricPrecision — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.

WebKit applique précisément la valeur définie, mais Gecko traite la valeur de la même manière que optimizeLegibility.

Syntaxe formelle

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Exemples

Application automatique de optimizeLegibility

Cet exemple illustre comment optimizeLegibility est automatiquement utilisé par les navigateurs lorsque font-size est inférieure à 20px.

 

CSS

.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }

 

HTML

<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

Résultat

optimizeSpeed et optimizeLegibility

Cet exemple illustre la différence d'apparence entre optimizeSpeed et optimizeLegibility (cette différence peut varier d'un navigateur à l'autre).

CSS

p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }

.speed       { text-rendering: optimizeSpeed; }
.legibility  { text-rendering: optimizeLegibility; }

HTML

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

Résultat

Spécifications

Spécification Statut Commentaires
Scalable Vector Graphics (SVG) 2
La définition de 'text-rendering' dans cette spécification.
Candidat au statut de recommandation Aucune modification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'text-rendering' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Non-standard
Chrome Support complet 4
Notes
Support complet 4
Notes
Notes This property is only supported on Windows and Linux.
Notes Initial versions had bugs on Windows and Linux that broke font substitition, small-caps, letter-spacing or caused text to overlap.
Edge ? Firefox Support complet 3
Notes
Support complet 3
Notes
Notes This property is only supported on Windows and Linux.
Notes The optimizeSpeed option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 for details.
IE Aucun support NonOpera Support complet 15Safari Support complet 5WebView Android Support complet 3
Notes
Support complet 3
Notes
Notes From version 3 to 4.3, there is a serious bug where text-rendering: optimizeLegibility causes custom web fonts to not render. This was fixed in version 4.4.
Chrome Android ? Edge Mobile ? Firefox Android Support complet 46Opera Android Support complet 36Safari iOS Support complet 4.3Samsung Internet Android ?
auto
Non-standard
Chrome Support complet Oui
Notes
Support complet Oui
Notes
Notes Chrome treats auto as optimizeSpeed.
Edge ? Firefox Support complet Oui
Notes
Support complet Oui
Notes
Notes If the font size is 20 pixels or higher, Firefox treats auto as optimizeLegibility. For smaller text, Firefox treats auto as optimizeSpeed. The 20-pixel threshold can be changed with the browser.display.auto_quality_min_font_size preference.
IE Aucun support NonOpera ? Safari Support complet Oui
Notes
Support complet Oui
Notes
Notes Safari treats auto as optimizeSpeed. See WebKit bug 41363.
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
geometricPrecision
Non-standard
Chrome Support complet 13
Notes
Support complet 13
Notes
Notes Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Edge ? Firefox Support complet Oui
Notes
Support complet Oui
Notes
Notes Firefox treats geometricPrecision the same as optimizeLegibility.
IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, webdif, teoli, FredB, hsablonniere, Manu1400
Dernière mise à jour par : SphinxKnight,