Forcer l'anticrénelage à l'aide de css : Est-ce un mythe ?

Question

Récemment, un client s'est plaint de l'apparition d'une police système dans IE6. En gros, le problème est qu'IE6 ne prend pas en charge le lissage/anticrénelage des polices (je sais que vous pouvez l'activer dans un paramètre du système d'exploitation ou autre). Mais quelqu'un a jeté ce petit bijou :

"Vous pouvez forcer l'anti-alias des polices en css en utilisant pt au lieu de px."

J'ai fait un rapide POC dans différents navigateurs et je n'ai vu aucune différence. J'ai trouvé une référence à ce sujet en ligne, le dernier message sur ce forum :

http://www.webmasterworld.com/css/3280638.htm

Cela ressemble à l'équivalent d'un mythe urbain de développeur web, mon sentiment est que c'est de la foutaise. Quelqu'un l'a-t-il déjà rencontré ?

Answer 1

Oh oui, vous pouvez :

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;

Source pour Firefox Merci. Justin pour l'info.

Answer 2

Il y a ces nouvelles propriétés passionnantes dans CSS3 :

font-smooth:always;
-webkit-font-smoothing: antialiased;

Je n'ai pas encore fait beaucoup de tests avec eux, et il est presque certain qu'ils ne seront pas bons pour l'IE. Ils pourraient être utiles pour Chrome sous Windows ou peut-être Firefox. La dernière fois que j'ai vérifié, ils n'antialiasaient pas automatiquement les petites choses comme ils le font dans OSX.

UPDATE

Ils ne sont pas pris en charge par IE ou Firefox. La propriété font-smooth n'est disponible que dans iOS safari pour autant que je me souvienne.

Answer 3

Non, il n'y a pas vraiment de moyen de contrôler cela en tant que développeur web.

Les petites exceptions sont que vous pouvez faire un faux forçage de l'anticrénelage en utilisant Flash par le biais de sIFR et certains navigateurs ne permettent pas l'anti-alias des polices bitmap/pixel (ce qui devrait être le cas, plus d'informations à ce sujet) : Anti-aliasing / Anti-anticrénelage ).

De plus, comme Daniel l'a mentionné, il est idéal d'utiliser em pour toutes les polices, voir Les incroyables mises en page Em & Elastic avec CSS pour plus d'informations à ce sujet.

Answer 4

J'ai trouvé une solution vraiment maladroite en utilisant les propriétés ms-only du zoom et du filtre. Exemple (essayez sans aa, standard et cleartype) : http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html

Comment cela fonctionne :

-Faire un zoom sur le texte avec zoom:x, x>1

-Appliquez un ou plusieurs flous (ou tout autre filtre).

-Dézoomer avec le zoom:1/x

C'est une méthode un peu lente, et très gourmande en mémoire, et sur les fonds non blancs, elle présente un léger halo sombre.

CSS :

.insane-aa-4b                  { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur  { zoom:1;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}

HTML :

<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
  <div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>

Vous pouvez utiliser ce petit jQuery pour forcer l'anticrénelage, il suffit d'ajouter la classe ieaa à n'importe quoi :

$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });

Answer 5

L'ajout de la ligne CSS suivante fonctionne pour Chrome, mais pas pour Internet Explorer ou Firefox.

text-shadow: #fff 0px 1px 1px;