Est-il possible d'utiliser la règle CSS "text-rendering : optimizelegibility ;" sur tout le texte ?

Question

J'ai remarqué ceci woo theme par exemple, il est défini sur la balise HTML et donc sur l'ensemble du texte du site. J'ai lu que cela pouvait causer des problèmes de performance, mais c'était il y a longtemps. Certaines personnes ont suggéré de l'ajouter uniquement aux en-têtes et aux grands textes.

Les règles ont-elles changé maintenant ? Les navigateurs sont-ils performants ?

Answer 1

Non : il y a eu de nombreux bogues au fil des ans sur diverses plates-formes qui font que le texte ne s'affiche pas ou s'affiche incorrectement (voir ci-dessous). Si votre objectif est d'activer les ligatures, il existe en fait une propriété standard font-variant-ligatures défini dans Polices CSS niveau 3 qui offre un contrôle total :

font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

Ver font-variant pour les autres caractéristiques typographiques qui peuvent être activées, telles que les petites capitales, les formes de lettres alternatives, etc.

Histoire

Antes de font-variant-ligatures et les propriétés connexes ont été ajoutées, les anciennes font-feature-settings permet d'activer la même fonction. Il s'agit d'une interface de niveau inférieur qui n'est plus recommandée, sauf pour activer les fonctionnalités OpenType qui ne disposent pas d'une interface de niveau supérieur.

http://blog.fontdeck.com/post/15777165734/opentype-1 a un exemple simple :

h1 {
    -webkit-font-feature-settings: "liga", "dlig";
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/ a aussi plus de discussion.

Galerie des insectes

Le populaire projet HTML5 Boilerplate l'a supprimé il y a deux ans en raison de divers problèmes de rendu :

https://github.com/h5bp/html5-boilerplate/issues/78

Deux bogues de Chromium que je viens de corriger ce matin faisaient que Chrome 21 sous Windows XP n'effectuait pas du tout la substitution de police, affichant le symbole du caractère manquant au lieu d'en utiliser un d'une police différente, et affichant le texte de manière incorrecte en chevauchant d'autres éléments :

http://code.google.com/p/chromium/issues/detail?id=114719

http://code.google.com/p/chromium/issues/detail?id=149548

Ver http://aestheticallyloyal.com/public/optimize-legibility/ pour quelques autres préoccupations.

http://bocoup.com/weblog/text-rendering/ a mis en évidence des problèmes de compatibilité avec Android et des problèmes généraux de performance

Answer 2

Du MDN rendu de texte page, dernière mise à jour le 18:27, 29 avr 2012 il est écrit :

La propriété CSS text-rendering fournit des informations au moteur de rendu sur les éléments à optimiser pour le rendu du texte. Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique. La propriété de rendu du texte est une propriété SVG qui n'est définie dans aucune norme CSS. Cependant, les navigateurs Gecko et WebKit vous permettent d'appliquer cette propriété au contenu HTML et XML sur Windows, Mac OS X et Linux.

qui nous dit qu'il n'est défini dans aucune norme CSS, ce qui entraîne des problèmes de compatibilité entre navigateurs, comme on peut le voir sur la page Compatibilité des navigateurs table.

Par défaut

Le navigateur fait des suppositions éclairées sur le moment où il faut optimiser la vitesse, la lisibilité et la précision géométrique lors du dessin du texte.

On peut donc supposer que la meilleure option est de laisser le navigateur s'occuper de ce genre de détails, puisque cette fonctionnalité n'est pas une norme ( mais ), et la plupart des navigateurs ne le prennent pas en charge.

Answer 3

text-rendering: optimizeLegibility; a été utilisé dans l'une de nos applications Web. Il s'est affiché correctement dans tous les navigateurs, sauf un - chrome (64) sur Windows 7.

Nous avons dû supprimer cette propriété car la plupart de nos utilisateurs finaux appartenaient à cette catégorie.

Answer 4

Je viens de corriger un bug où Chrome refusait de rendre les polices web (il revenait toujours à une police non-web, sans que nous puissions discerner la raison). En fin de compte - après une quantité considérable de grattage de tête - le problème a été corrigé en réglant le rendu des textes à partir de optimizeLegibility (qui avait été défini par Twitter Bootstrap, pour ce que ça vaut) en auto .

Je dirais donc que pour le moment, la réponse est probablement "non". Ce qui ne veut pas dire qu'il ne faut pas l'utiliser, mais qu'il ne faut pas l'appliquer à tout. Utilisez-le lorsque c'est nécessaire et testez-le soigneusement pour détecter les bizarreries ou les effets inattendus (surtout dans Chrome !).

Answer 5

L'utilisation de "text-rendering : optimizelegibility" provoque également des erreurs de rendu dans le navigateur natif d'Android (4.2 et 4.3). Si vous utilisez cet attribut en combinaison avec le chargement de nouvelles polices par l'intermédiaire de @font-face Sans "text-rendering : optimizelegibility" et @font-face, la police se charge et s'affiche comme prévu.