Récemment, un client s’est plaint de l’apparition d’une police système dans IE6. Fondamentalement, le problème est que IE6 ne prend pas en charge le lissage des polices/l’anti-aliasing (je sais que vous pouvez l’activer dans un paramètre du système d’exploitation ou autre). Mais quelqu'un a jeté ce joyau:
"Vous pouvez forcer l'anti-alias de police dans 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 en ligne, dernier post 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 BS. Quelqu'un l'a-t-il déjà rencontré?
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 forcer un faux anti-aliasing en utilisant Flash via sIFR , et que certains navigateurs ne permettent pas l'utilisation de polices bitmap/pixel anti-alias (comme ils ne devraient pas, plus d'infos: Anti -Aliasing / Anti-Anti-Aliasing ).
En outre, comme l'a mentionné Daniel, il est idéal d'utiliser des unités em
pour toutes les polices, voir Les mises en page Incredible Em & Elastic avec CSS pour plus d'informations à ce sujet.
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
Source pour Firefox , merci Justin pour le heads up.
Il y a ces nouvelles propriétés intéressantes dans CSS3:
font-smooth:always;
-webkit-font-smoothing: antialiased;
Je n'ai toujours pas fait beaucoup d'essais avec eux et ils ne seront certainement pas bons pour IE. Cela pourrait être utile pour Chrome sous Windows ou peut-être Firefox. La dernière fois que j'ai vérifié, ils ne vérifiaient pas automatiquement les petites choses comme dans OSX.
METTRE À JOUR
Celles-ci ne sont pas prises en charge dans IE ou Firefox. La propriété font-smooth n'est disponible que dans iOS safari pour autant que je m'en souvienne
J'ai trouvé une solution très délicate en utilisant les propriétés de zoom et de filtrage uniquement. Exemple (essayez sans aa, standard et cleartype): http://nadycoon.hu/special/archive/internet-Explorer-force-antialias .html
Comment ça marche:
zoom avec zoom: x, x> 1
-appliquer du flou (ou un autre filtre)
-zoom vers le bas avec zoom: 1/x
C'est un peu lent et très! méthode gourmande en mémoire, et sur les fonds non blancs, il y a 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 court jQuery pour forcer l'anti-aliasing, ajoutez simplement 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>'
); });
L'ajout de la ligne CSS suivante fonctionne pour Chrome, mais pas pour Internet Explorer ou Firefox.
text-shadow: #fff 0px 1px 1px;
Je ne suis pas d'accord avec Chad Birch. Nous pouvons forcerons l’anti-aliasing, au moins dans Chrome en utilisant une astuce CSS simple avec la propriété -webkit-text-stroke
:
-webkit-text-stroke: 1px transparent;
Je dis que c'est un mythe.
La seule différence que j'ai trouvée entre les polices à base de pt, px et pourcentage réside dans ce que IE redimensionnera lorsque Menu> Affichage> Taille du texte>? Setting? est changé.
IIRC:
px
et pt
ne seront PAS mises à l'échellepercent
évoluent parfaitement dans IEAUTANT QUE JE SACHE:
"ClearType"
ou, dans le cas d'IE7/IE8, le paramètre spécifique à IE pour ClearType
.Le correctif px à pt a fonctionné pour moi sur un site utilisant une police de Google Web Fonts. Sur Win7 - IE8, il corrigeait correctement l’absence de rendu anti-alias.
Je pense que vous vous êtes un peu trompé. Quelqu'un dans le fil que vous avez collé dit que vous pouvez arrêter anti-aliasing en utilisant px
au lieu de pt
, mais pas que vous pouvez forcer en utilisant ce dernier. Je suis un peu sceptique quant aux deux revendications cependant ...
L'utilisation d'un paramètre d'opacité de 99% (via les filtres DXTransform) oblige en fait Internet Explorer à désactiver ClearType, au moins dans la version 7. Source
J'ai trouvé un correctif ...
.text {
font-size: 15px; /* for firefox */
*font-size: 90%; /* % restart the antialiasing for ie, note the * hack */
font-weight: bold; /* needed, don't know why! */
}
On dirait que la solution la plus exhaustive se trouve sur http://www.elfboy.com/blog/text-shadow_anti-aliasing/ . Fonctionne dans Firefox et Chrome, bien que Firefox ne soit pas aussi efficace que Chrome.
Ce n'est pas une pure CSS, mais une méthode supportée de manière native sans remplacement de polices: Convertissez simplement votre police en SVG et placez-la plus haut (avant WOFF ou TTF) dans l'ordre @ font-face. Voila! Les polices sont maintenant lisses, car elles ne sont plus traitées comme des polices mais comme une forme SVG qui sera bien lissée.
Note: J'ai remarqué que SVG peut peser plus que WOFF ou TTF.
En guise de remarque, Gecko et WebKit soutiennent la
text-rendering
la propriété aussi.
Voici un bon moyen de réaliser l'anti-aliasing:
text-shadow: 0 0 1px rgba(0,0,0,0.3);
Je doute qu'il soit possible de forcer un navigateur à faire quoi que ce soit. Cela dépend de la configuration du système, de la police utilisée, des paramètres du navigateur, etc. Cela me ressemble aussi à BS.
Remarque: utilisez toujours des tailles relatives et non PX.