Est-il prudent d'utiliser la règle CSS "text-rendering: optimizelegibility;" sur tout le texte?
J'ai remarqué que ce thème woo par exemple l'a défini sur la balise HTML et que, par conséquent, le texte de l'ensemble du site l'a défini. J'ai lu que cela pouvait causer des problèmes de performances, mais c'était il y a quelque temps. Certaines personnes ont suggéré de ne l'ajouter qu'aux en-têtes et aux gros textes.
Les règles ont-elles changé maintenant? Les navigateurs fonctionnent-ils bien avec cela?
Non: il y a eu beaucoup de bugs au fil des ans sur diverses plates-formes qui empêchaient l'affichage du texte ou un affichage incorrect (voir ci-dessous). Si votre objectif est d'activer les ligatures, il existe une propriété standard font-variant-ligatures définie dans CSS Fonts Level 3 qui offre un contrôle total:
font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
Voir font-variant pour d'autres fonctions typographiques pouvant être activées, telles que les petites majuscules, les lettres alternatives, etc.
L'histoire
Avant que font-variant-ligatures et les propriétés associées aient été ajoutées, l'ancienne propriété font-feature-settings permettait l'activation de la même fonctionnalité. Il s'agit d'une interface de niveau inférieur qui n'est plus recommandée, sauf pour activer les fonctionnalités OpenType ne disposant 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 également d'autres discussions.
Galerie de bogues
Le projet HTML5 Boilerplate populaire 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 problèmes de Chrome, que je viens de corriger ce matin, ont empêché Chrome 21 sous Windows XP de remplacer la police, d'afficher le symbole de caractère manquant plutôt que d'utiliser une police d'une autre police et d'afficher un texte superposant incorrectement d'autres éléments. :
http://code.google.com/p/chromium/issues/detail?id=114719
http://code.google.com/p/chromium/issues/detail?id=149548
Voir http://aestheticalloyal.com/public/optimize-legibility/ pour quelques autres préoccupations.
http://bocoup.com/weblog/text-rendering/ a souligné les problèmes de compatibilité sur Android et les problèmes de performances générales
depuis le MDN text-rendering page, dernière mise à jour le 18:27, 29 avr. 2012, elle se lit comme suit:
La propriété CSS de rendu de texte fournit au moteur de rendu des informations sur les éléments à optimiser lors du rendu de texte. Le navigateur fait des compromis entre vitesse, lisibilité et précision géométrique. La propriété de rendu de texte est une propriété SVG qui n'est définie dans aucune norme CSS. Toutefois, les navigateurs Gecko et WebKit vous permettent d’appliquer cette propriété au contenu HTML et XML sous Windows, Mac OS X et Linux.
ce qui nous indique qu’il n’est défini dans aucune norme CSS, ce qui entraîne des problèmes entre navigateurs, comme l’indique le tableau Compatibilité des navigateurs .
Par défaut
Le navigateur émet des hypothèses éclairées sur le moment optimal pour optimiser la vitesse, la lisibilité et la précision géométrique lors du traçage de texte.
Il est donc prudent de supposer que la meilleure option consiste à laisser le navigateur se charger de tels détails, car cette fonctionnalité n’est pas standard (encore), et la plupart des navigateurs ne la prennent pas en charge.
text-rendering: optimizeLegibility; a été utilisé dans l'une de nos applications Web. il est correctement rendu dans tous les navigateurs, sauf one - chrome (64) sous Windows 7.
Dû enlever la propriété car la plupart de nos utilisateurs finaux appartenaient à cette catégorie.
Je viens de corriger un bogue dans lequel Chrome refusait de rendre les polices Web (il s'agissait toujours d'un fichier non Web, sans aucune raison que nous puissions discerner). En fin de compte - après beaucoup de casse-tête - le problème a été résolu en définissant le rendu du texte de optimizeLegibility (qui avait été défini par Twitter Bootstrap, pour ce que ça vaut la peine) à auto.
Je dirais donc pour le moment que la réponse est probablement "non". Ce qui ne veut pas dire ne l'utilisez pas, mais ne l'appliquez pas à tout. Utilisez-le là où vous en avez besoin et testez-le soigneusement pour vous assurer qu'il ne présente pas d'étrangeté ou d'effet inattendu (en particulier dans Chrome!).
l'utilisation de "rendu de texte: optimizelegibility" provoque également des erreurs de rendu dans le navigateur natif Android (4.2 & 4.3). Si vous utilisez cet attribut en même temps que le chargement de nouvelles polices via @ font-face , la police ne s'affichera pas du tout (repli uniquement). sans "text-rendering: optimizelegibility" et @ font-face, la police se charge et s'affiche comme prévu.
Le rendu de texte CSS semble fragile. Au lieu de passer du temps avec une mauvaise propriété CSS, il peut être intéressant d’aller de l’avant avec cette ...
Si JavaScript est une option pour vous, Kerning.js semble prometteur, une approche javascript des paires de crénage et de crénage hébergées sur Github.
Il convient également de noter que si vous commencez à travailler sérieusement avec la typographie, il existe des polices Web Font Squirrel gratuites.