Lissage de Webfont et antialiasing dans Firefox et Opera

J’ai des webfonts personnalisés incorporés sur mon site et j’utilise des trucs comme

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

pour styler ma sortie de rendu. Cela fonctionne très bien dans Safari et Chrome. Je suis beaucoup plus tranchant et les lignes plus fines.

Y at-il un moyen de faire des choses comme ça dans Firefox? Ou opéra?

Comme Opera est alimenté par Blink depuis la version 15.0, -webkit-font-smoothing: antialiased fonctionne également sur Opera.

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

 -moz-osx-font-smoothing: grayscale; 

Cela devrait corriger les fonts icône floue ou un 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 fonts sur OSX, qui inclut un mixin Sass pour gérer les deux propriétés.

Eh bien, Firefox ne supporte pas quelque chose comme ça.

Dans la page de référence de Mozilla, spécifie font-smooth car la propriété CSS contrôle l’application de l’anti-aliasing lors du rendu des fonts, 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-crénelage de l’ombre du texte | Philip Renich, Sites Web – blog
  • cufón – fonts pour les gens

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 bien définir explicitement blur-radius.

Ce n’est pas une solution universelle, mais peut aider dans certains cas. De plus, je n’ai pas connu (ni testé de manière approfondie) les impacts négatifs de cette solution sur les performances.

Après avoir rencontré le problème, j’ai découvert que mon fichier WOFF n’était pas correctement exécuté, j’ai envoyé un nouveau TTF à FontSquirrel qui m’a donné un fichier WOFF correct qui était lisse dans Firefox sans y append 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 pas à pas:

  • envoyer votre police à un WebFontGenerator et obtenir le zip
  • trouver la police TTF sur le fichier Zip
  • alors, sur linux, faites cette commande (ou installez-la 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 WebFontGenerator
  • vous obtenez un zip parfait avec tous vos webfonts!

J’espère que cela aidera.

Lorsque la couleur du texte est sombre, dans Safari et Chrome, le résultat est meilleur avec la propriété text-stroke css.

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

… dans la balise body et ceux du contenu et la police de caractères a l’air mieux en général …

 body, html { width: 100%; height: 100%; margin: 0; padding: 0; text-rendering: optimizeLegibility; text-rendering: geomesortingcPrecision; 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; } 

Ajouter

 font-weight: normal; 

Pour vos fonts @ font-face, cela corrigera l’apparence en gras de Firefox.