web-dev-qa-db-fra.com

Forcer l'anticrénelage à l'aide de CSS: s'agit-il d'un mythe?

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é?

cssfonts
61
FriendOfFuture

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.

29
Chad Birch

Oh oui tu peux:

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

Source pour Firefox , merci Justin pour le heads up.

44
Ryan Brodie

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

39
BaronVonKaneHoffen

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>'
); });
16
biziclop

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

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

8
Matthew

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;
7
Salman Abbas

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:

  • les polices basées sur px et pt ne seront PAS mises à l'échelle
  • Les polices à base percent évoluent parfaitement dans IE

AUTANT QUE JE SACHE:

  • L'anticrénelage des polices est principalement contrôlé par le paramètre windows pour "ClearType" ou, dans le cas d'IE7/IE8, le paramètre spécifique à IE pour ClearType.
3
scunliffe

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. 

2
Matt

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 ...

2
Deniz Dogan

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

1
Pekka 웃

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! */
        }
0
Jean-Philippe Martin

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.

0
Matthew O'Riordan

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.

0
Pawel

En guise de remarque, Gecko et WebKit soutiennent la 

text-rendering

la propriété aussi.

0
Jbird

Voici un bon moyen de réaliser l'anti-aliasing:

text-shadow: 0 0 1px rgba(0,0,0,0.3);
0
Jason Foglia

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.

0
Daniel A. White