Lissage et Antialiasage Webfont dans Firefox et Opera
j'ai quelques webfonts personnalisés intégrés à mon site et j'utilise des trucs comme
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
à mon style de rendu de sortie. Cela fonctionne très bien en Safari et Chrome. J'ai des bords plus tranchants et des lignes plus fines.
y a-t-il un moyen de faire ce genre de choses dans Firefox? Ou À L'Opéra?
8 réponses
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 grayscaled. Après un long discussion il sera disponible dans la Version 25 avec une autre syntaxe, qui souligne que cette propriété ne fonctionne que sur OS X.
-moz-osx-font-smoothing: grayscale;
cela devrait corriger les polices d'icône floues ou le texte clair sur les fonds sombres.
.font-smoothing {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
, Vous pouvez lire mon post à propos de rendu des polices sur OSX , qui comprend un mixin Sass pour gérer à la fois des 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 comme propriété CSS contrôle l'application de l'anti-aliasing lorsque les polices sont rendues, mais cette propriété a été supprimé de cette spécification et n'est actuellement pas sur la voie standard.
cette propriété n'est prise en charge que dans les navigateurs Webkit.
si vous voulez une alternative vous pouvez le vérifier:
Case: texte clair avec police jaggy web sur fond foncé Firefox (v35) / Windows
Exemple: Polices Web De Google Ruda
Surprenant solution
ajouter la propriété suivante aux sélecteurs appliqués:
selector {
text-shadow: 0 0 0;
}
en fait, le résultat est le même juste avec text-shadow: 0 0; , mais j'aime explicitement définir flou-radius.
c'est pas une solution universelle, mais peut aider dans certains cas. En outre, je n'ai pas connu (pas non plus testé à fond) les impacts négatifs de la performance de cette solution jusqu'à présent.
après avoir couru dans le problème, j'ai découvert que mon fichier WOFF n'a pas été fait correctement, j'ai envoyé un nouveau TTF à FontSquirrel qui m'a donné un WOFF approprié qui a été lisse dans Firefox sans ajouter de CSS supplémentaire à elle.
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 :
- envoyez votre police à un WebFontGenerator et obtenez le zip
- trouver la police TTF sur le fichier Zip
- ensuite, sur linux, faire cette commande (ou installer par
apt-get install ttfautohint):
ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf - ensuite, un de plus, envoyer le nouveau fichier TTF (neosansstd-black.modifié.ttf) sur le 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, j'ai de meilleurs résultats avec la propriété CSS De text-stroke.
-webkit-text-stroke: 0.5px #000;
... dans la balise de corps et ceux-ci du contenu et la police de caractère semble 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;
}
ajouter
font-weight: normal;
à vos polices @font-face corrigera l'apparence audacieuse de Firefox.