Font-face avec Anti-Aliasing sur Mac OSX & Windows.

Voici quelques pistes pour « lisser » un texte sous différents navigateurs sur Windows et Mac OSX, ou du moins pour déclencher cleartype sur les typos, afin que votre font-face soit toujours beau et délicat :

Sur IE 7 & IE 8

Une opacité de .99 semble déclencher le lissage de la police.

filter: alpha(opacity=99);

Un background non transparent défini sur le bloc ou son parent marche parfois également.

background:#fff;

Sur Webkit (Google Chrome, Safari, …)

L’opacité à 999‰ peut également ramener un rendu de police correct … même sous OSX. Cette astuce permettra également d’éviter l’effet de police qui devient grasse lorsqu’on change son opacité avec transition.

opacity:0.999;

Changer l’ordre des types de font (parfois remonter le SVG) dans la propriété font-face m’a donné de belles surprises, sous Windows & OSX.

@font-face {
    font-family: 'MaFont';
    src: url('MaFont.eot');
    src: url('MaFont.eot?#iefix') format('embedded-opentype'),
         url('MaFont.svg#MaFont') format('svg'),
         url('MaFont.woff') format('woff'),
         url('MaFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

webkit-text-stroke ajoute une bordure interne (couleur/taille à adapter) et permet de « récupérer » certaines polices fines.

-webkit-text-stroke: 0.5px #fff;

Une très légère rotation peut éventuellement activer ClearType.

-webkit-transform: rotate(-0.0000000001deg);

Sur les anciennes version de Chrome, une ombre presque invisible déclenchait Cleartype. Ne fonctionne plus sur les dernières versions.

text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);

Jouer avec webkit-font-smoothing peut aussi donner un résultat.

-webkit-font-smoothing: (subpixel-antialiased|antialiased|none);

Sur Firefox

Un fichier .htaccess contenant le mime-type des polices devrait être présent.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Le kerning étant désactivé sur certaines fonts, son activation peut aider beaucoup au rendu

text-rendering: optimizeLegibility;

Sur les autres navigateurs …

• Si vous utilisez le Font-Face Generator de Font Squirrel, assurez vous (mode expert) d’utiliser « Truetype Hinting: Font Squirrel ». Si vous n’êtes pas sûr et que votre rendu n’est pas génial, renvoyez le fichier original !
• Assurez-vous que le font-weight déclaré en CSS correspond au font-weight de la police chargée.
• Parfois, les navigateurs préfèreront une taille de police à une autre. 12px ou 16px peuvent, par exemple, donner de meilleurs résultats que 13px ou 17px.
• Jouer avec text-shadow peut aider légèrement sur Firefox.
• Si rien ne marche, votre typo n’est probablement pas adaptée à un usage web. Il est difficile d’imiter certains réglages de Photoshop, comme « Police Nette » et autres.

Et vous, vous avez d’autres pistes ?