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

112

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?

mat
la source
5
Ce serait une bonne idée d'arrêter de faire cela et de lire pourquoi ici: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing
fregante
20
^ c'est une généralisation large et il est bien d'utiliser le lissage des polices. C'est le problème de rendu qui est le problème, pas le comportement du concepteur. Lorsque vous concevez une mise en page et que la police semble être semi-grasse en raison du moteur de rendu, c'est le moteur qui doit être corrigé, pas la mise en page.
Dylan
1
Ce n'est pas entièrement une généralisation large. L'article dit que le rendu des sous-pixels était principalement destiné à rendre le texte clair sur des arrière-plans sombres plus lisible (c'est-à-dire accessible), et à créer une définition CSS large comme body { -webkit-font-smoothing: antialiased; }est trop lourde.
Matt Scheurich
3
Mes polices Web qui sont sombres sur des arrière-plans clairs deviennent également "faux gras". Je dis "anti-crénelé" tout autour.
Jason T Featheringham
5
La façon dont une page s'affiche dépend du concepteur, y compris tous les attributs typographiques. Il est de leur responsabilité d'assurer la convivialité, la cohérence et l'attrait sur le plus large éventail de plates-formes. L'accès aux attributs de lissage des polices via CSS permet un meilleur contrôle. Comme tout, il peut être mal utilisé entre de mauvaises mains. Mais vanter une philosophie personnelle plutôt que de répondre à la question n'est pas utile.
Beejor

Réponses:

193

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.

Maximilian Hoffmann
la source
6
Pourquoi OSX uniquement ??
Yassir Ennazk
7
Windows et Linux utilisent des algorithmes de rendu pour les polices différents de ceux d'OSX.
Maximilian Hoffmann
15

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:

Jonathan Naguin
la source
2
Eh bien, le problème que j'ai est que mes polices semblent "audacieuses" et gonflées dans Firefox et Opera. Avec -webkit-font-smoothing:antialiased;je pourrais le réparer dans Safari et Chrome. J'adorerais trouver n'importe quel "hack" pour rendre mes polices un peu plus légères dans Firefox aussi. J'ai pensé à lui appliquer un blanc text-shadowuniquement en moz, mais il n'y a aucun moyen d'appliquer une ombre de texte "incrustée" qui éclaircirait la police.
mat
1
@matt Vous pouvez essayer quelques conseils CSS dans cette question: stackoverflow.com/questions/761778/… Peut-être trouvez-vous une alternative CSS.
Jonathan Naguin
11

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.

Volker E.
la source
Ne fait rien pour aider
vsync
cela entraînera des polices plus audacieuses sur chrome basées sur la police
Ben Sewards
1
@BenSewards Fourniriez-vous une police dans laquelle vous avez rencontré un rendu de police plus audacieux? Ou peut-être même un CodePen? Merci d'avance.
Volker E.
1
@VolkerE. merci pour la bonne solution. J'ai le même problème ennuyeux avec la police Source Code Pro dans un en-tête collant. Lorsque je fais défiler la police, la police est très petite et avec votre ombre de texte, la police ne pose aucun problème.
Evolutio
Sur le chrome actuel (58.0.3029.110), le texte "lisse" semble vraiment horrible. (le texte "jaggy" est un peu mieux)
RecursiveExceptionException
7

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.

azenet
la source
est-ce dans les fenêtres?
Vignesh
5

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.

Plici Stéphane
la source
A fait un excellent travail pour corriger les irrégularités des polices pendant les transitions css (mais pas complètement supprimé). J'ai utilisé le générateur FontSquirrel avec l'option TTFAutohint
Andrey
J'ai utilisé Fontie pour régénérer mes fichiers WOFF, WOFF2, EOT et SVG avec l'autohint pour Windows activé.
Dominique
4

... 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;

}
utilisateur3634787
la source
2
Je suis désolé ... qu'est-ce que "reinschreiben"? La plupart d'entre nous ne parlent pas allemand, alors ce serait bien si vous rédigiez l'intégralité de votre message en anglais.
rayryeng
3
Oh s'il vous plaît, je m'excuse d'avoir traduit avec Google et en quelque sorte le mauvais mot depuis glissé :)
user3634787
3

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;
Christelle
la source
La question concerne Firefox et Opera. donc cette réponse n'a rien à voir avec la question
vsync
-4

Ajouter

font-weight: normal;

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

Aaron VIII
la source
7
font-weight(sans surprise) affecte l'épaisseur de la police, pas le lissage de la police. L'ajouter aux déclarations @ font-face entraînera de la confusion si le fichier de police lié n'est pas un fichier de police de poids normal.
Mike Meyer
@MikeMeyer En fait, je suis d'accord avec le commentaire d'Aaron. Ajout de poids de police: normal à une police d'inclusion qui est une police "légère" semble ajouter de la confusion, mais cela ne devrait que dérouter le développeur novice. C'est en fait une bonne pratique de spécifier un défaut de normal dans mon expérience. Normal dans ce cas fait référence à «normal» pour la police incluse et les caractères utilisés, et n'est pas destiné à spécifier des informations sur la police elle-même. Dans de nombreux cas, cela réduira (en particulier sur les grandes plates-formes) la probabilité de bogues provenant de la mauvaise architecture trop typique que vous voyez autour des styles de police.
dudewad
En fait, le nom de la face de la police elle-même devrait indiquer le poids de la police par défaut ...!
dudewad
@dudewad c'est génial que vous soyez d'accord, et oui, c'est un «conseil de pro» décent (mais plutôt laconique) font-weight. Le fait est qu'OP ne posait pas de questions sur font-weight- il posait des questions sur l' antialiasing . C'est une réponse correcte pour une question complètement différente.
Mike Meyer
@MikeMeyer vous avez tout à fait raison. Je m'emballe parfois. ;)
dudewad