Lissage et anticrénelage des polices Web dans Firefox et Opera

J'ai des polices Web personnalisées utilisées sur mon site. Pour styliser ma sortie de rendu, j'ai utilisé le code suivant:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

Cela fonctionne bien sur Safari et Chrome (les bords sont plus nets et les lignes sont plus fines). Existe-t-il un moyen d'implémenter le même style sur Firefox et Opera?

Comme Opera est alimenté par Blink puisque la version 15.0 -webkit-font-smoothing: antialiasedfonctionne également sur Opera.

Firefox a enfin ajouté une propriété pour activer l'antialiasing en niveaux de gris. Après une longue discussion, il sera disponible en version 25 avec une autre syntaxe, ce qui souligne que cette propriété ne fonctionne que sous OS X.

-moz-osx-font-smoothing: grayscale;

Cela devrait corriger les polices d'icônes floues ou le texte clair sur les arrière-plans sombres.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Vous pouvez lire mon article sur le rendu des polices sur OSX qui comprend un mixin Sass pour gérer les deux propriétés.

Eh bien, Firefox ne prend pas en charge quelque chose comme ça.

Dans la page de référence de Mozilla spécifie font-smoothque la propriété CSS contrôle l'application de l'anti-aliasing lorsque les polices sont rendues, mais cette propriété a été supprimée de cette spécification et n'est actuellement pas sur la piste standard.

Cette propriété n'est prise en charge que dans les navigateurs Webkit.

Si vous voulez une alternative, vous pouvez vérifier ceci:

• Anti-aliasing de l'ombre du texte | Philip Renich, sites Web - blog
• cufón - des polices pour le peuple

Cas: Texte clair avec une police Web irrégulière sur fond sombre Firefox (v35) / Windows
Exemple: Google Web Font Ruda

Solution surprenante -
ajout de la propriété suivante aux sélecteurs appliqués:

selector {
    text-shadow: 0 0 0;
}

En fait, le résultat est le même avec text-shadow: 0 0;, mais j'aime définir explicitement le rayon de flou.

Ce n'est pas une solution universelle, mais pourrait aider dans certains cas. De plus, je n'ai pas connu d'impacts négatifs sur les performances de cette solution (pas encore testés de manière approfondie) jusqu'à présent.

Après avoir rencontré le problème, j'ai découvert que mon fichier WOFF n'était pas fait correctement, j'ai envoyé un nouveau TTF à FontSquirrel qui m'a donné un WOFF approprié qui était fluide dans Firefox sans ajouter de CSS supplémentaire.

J'ai trouvé la solution avec ce lien: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Méthode étape par étape:

• envoyer votre police à un WebFontGenerator et obtenir le zip
• trouver la police TTF sur le fichier Zip
• puis, sous linux, exécutez cette commande (ou installez par apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• puis, un autre, envoyez le nouveau fichier TTF (neosansstd-black.changed.ttf) sur le WebFontGenerator
• vous obtenez un Zip parfait avec toutes vos polices Web!

J'espère que cela aidera.

... dans la balise body et ceux du contenu et de la police semblent mieux en général ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Lorsque la couleur du texte est sombre, dans Safari et Chrome, j'ai de meilleurs résultats avec la propriété css text-stroke.

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

Ajouter

font-weight: normal;

Pour vos polices @ font-face, cela corrigera l'apparence grasse de Firefox.