web-dev-qa-db-fra.com

Lissage et antialiasing de Webfont dans Firefox et Opera

J'ai des polices Web personnalisées intégrées sur mon site et j'utilise des outils comme

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

styliser ma sortie de rendu. Cela fonctionne très bien dans Safari et Chrome. J'ai des bords bien plus nets et des lignes plus minces.

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

csscss3fontsantialiasingwebfonts
111
matt

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é permettant d'activer l'antialiasing en niveaux de gris. Après une longue discussion , elle sera disponible dans la version 25 avec une autre syntaxe, indiquant 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 des fonds sombres.

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

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

190
Maximilian Hoffmann

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 polices, mais cette propriété a été supprimée de cette spécification et n’est pas actuellement sur la voie standard.

Cette propriété est uniquement prise en charge par les navigateurs Webkit.

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

15
Jonathan Naguin

Cas: texte clair avec 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 identique 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 eu (jusqu’à présent pas été testé à fond) les impacts négatifs de cette solution sur les performances.

10
Volker E.

Après avoir rencontré le problème, j'ai découvert que mon fichier WOFF n'avait pas été correctement configuré. J'ai envoyé un nouveau fichier TTF à FontSquirrel , qui m'a donné un fichier WOFF correct qui fonctionnait correctement dans Firefox sans y ajouter de CSS supplémentaire. .

7
azenet

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
  • puis, sous linux, exécutez cette commande (ou installez-la avec apt-get install ttfautohint):
    ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
  • puis, encore une fois, envoyez le nouveau fichier TTF (neosansstd-black.changed.ttf) sur WebFontGenerator
  • vous obtenez un fichier Zip parfait avec toutes vos polices Web!

J'espère que cela aidera.

5
Plici Stéphane

... dans la balise body et celles du contenu et de la police de caractères ont une meilleure apparence 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;

}
4
user3634787

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

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