CSS3: Webfont Lissage et l'Antialiasing dans Firefox et Opera

Question

J'ai coutume fait les polices web intégré sur mon site et j'utilise des trucs comme

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

pour mon style de rendu de sortie. Cela fonctionne bien dans Safari et Chrome. Je reçois beaucoup plus de netteté des bords et des lignes plus fines.

Est-il un moyen de faire des trucs comme ça dans Firefox? Ou À L'Opéra?

Je vous remercie à l'avance.

Answer 1

Que l'Opéra est alimenté par Blink depuis la Version 15.0 -webkit-font-smoothing: antialiased ne travaillent également sur l'Opéra.

Firefox a enfin ajouté une propriété pour permettre grayscaled antialiasing. Après une longue discussion , il sera disponible en Version 25 avec une autre syntaxe, qui souligne que cette propriété ne fonctionne que sur mac OS X.

-moz-osx-font-smoothing: grayscale;

Cela devrait corriger les flous de l'icône polices ou texte clair sur un fond sombre.

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

Vous pouvez lire mon post à propos de la police de rendu sur OSX qui comprend un mixin Sass pour gérer à la fois des propriétés.

Answer 2

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

Dans la page de référence à partir de Mozilla spécifie font-smooth comme propriété CSS contrôles de l'application de l'anti-aliasing lorsque les polices sont rendus, mais cette propriété a été supprimé à partir de cette spécification et est actuellement pas sur la voie ordinaire.

Cette propriété est uniquement pris en charge dans les navigateurs Webkit.

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

• Text-Shadow Anti-Aliasing | Philip Renich, des Sites web - blog
• cufón - polices de caractères pour les personnes

Answer 3

Après l'exécution de la question, j'ai découvert que mon WOFF fichier n'a pas été fait correctement, j'ai envoyé un nouveau TTF à FontSquirrel qui m'a donné un bon WOFF qui a été bon dans Firefox sans ajout supplémentaire de la CSS.

Answer 4

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
• ensuite, sur linux, exécutez cette commande (ou de l'installation par apt-get install ttfautohint) :
  • ttfautohint --fort-tige-largeur=g neosansstd-noir.ttf neosansstd-noir.changé.ttf
• alors, un de plus, d'envoyer le nouveau fichier ttf (neosansstd-noir.changé.ttf) sur la WebFontGenerator
• vous obtenez un parfait Zip avec toutes vos polices web !

J'espère que cela aidera.

Answer 5

Lorsque la couleur de texte est sombre, Safari et Chrome, j'ai un meilleur résultat avec le texte-avc propriété css.

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