Comment rendre mince polices de manière plus fluide dans le CSS 3 sur Windows?

Lorsque j'ai conçu mon site web d'Adobe Flash Pro CS6, la police ressemble à ceci:

La police semble lisse et légèrement plus épais, et quand j'ai créer le HTML et le CSS pour rendre la police dans un navigateur, il apparaît comme celles-ci, respectivement dans IE, Firefox et Chrome.

Comment rendre mince polices de manière plus fluide dans le CSS 3 sur Windows?

Il apparaît plus mince et pixélisé dans certains domaines. J'ai vu beaucoup plus lisse rendu des polices sur mac OS X. Comment puis-je faire la police semble plus lisse dans ces navigateurs? Je suppose que c'est un problème avec ClearType, qui a l'air horrible avec de fines polices comme celui-ci.

Voici le code que j'utilise pour tester, donc, les réponses peuvent être testés avant d'être posté:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
    </body>
</html>

ClearType n'est Microsoft du nom de la sous-pixel rendering qui rend votre police apparaissent "de couleur" sur Firefox et Chrome, à moins que vous le réparer via CSS (BTW, j'ai toujours détesté le sous-rendu, qui est une de ces idées qui sont bonnes qu'en théorie, pas dans la pratique)
À mes yeux, la différence entre le rendu dans CS6 et dans les navigateurs ressemble provenant d'un autre gamma (ɣ) ou à partir d'une transparence appliqué (dans les navigateurs) en plus de la fonction de lissage (c'est à dire, les pixels gris sont aussi partiellement transparent)
Dernière info: Firefox et Chrome sur mon Ubuntu 12.04 rendre la police quelque part entre votre extrêmes, peut-être un peu plus proche de CS6 (ce qui est particulièrement lisse rendu) que de vos navigateurs - et sans colorant (mais c'est peut-être parce que j'ai désactivé l'échelle mondiale, quelque part).
Avez-vous essayé de regarder votre page de test sur d'autres machines? Je ne suis pas sûr, mais le rendu des polices pourraient dépendre de matériel graphique et le firmware, et les paramètres de trop.
Je vais essayer ça. Après tout, mon ordinateur portable ne veut pas rendre les choses correctement dans IE sauf si je désactive le rendu matériel... je n'ai même pas penser à ce qui jusqu'à maintenant.
Je dois corriger un commentaire ci-dessus: "les pixels gris sont aussi partiellement transparent" doit être "en partie des pixels transparents sont également gris (partie blanche)". Mais c'est seulement à l'effet visuel. La raison en est probablement l'algorithme de rendu, qui tente de donner une impression de netteté au détriment de la précision. CS6 semble avoir une approche complètement différente: il semble que la forte vecteur d'image est brouillée avec le bon produit de convolution de la fonction (dont la théorie dit que est une fonction sinc), et l'échantillonnage est effectué en prenant en compte les corriger le gamma. Le résultat est flou mais sinon parfait

InformationsquelleAutor Phoenix Logan | 2014-03-31

73

Vous n'allez jamais à obtenir des sites pour voir les la même dans les différents navigateurs ou systèmes d'exploitation, ils sont à l'aide de différentes technologies, etc etc.

C'est quelque chose que vous ne devrait pas vraiment se soucier de. Les gens qui utilisent IE ne vont pas passer à Firefox ou Chrome, ou vice versa. Ils sont habitués à la façon dont les polices de regarder et de ne sont pas en train de l'observer.

Navigateurs incohérences est une chose développeurs front end ont à vivre avec (malheureusement). Sa grande si ils se ressemblent tous, mais qui ne va pas arriver

Choses que vous peut essayez, vous aurez probablement besoin de différents correctifs pour les différents navigateurs.:
```
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
```
Edit 1: DirectWrite est maintenant sur google chrome pour windows qui sera améliorer le rendu.

Edit 2 (2017): l'INTERFACE utilisateur du Système de polices

Une autre chose que vous pouvez faire est d'essayer d'utiliser les polices système pour l'amélioration de l'UX.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Readup - smashingmagazine

Readup - booking.com

Readup - moyen
- Aucune des solutions n'a fonctionné, mais c'était la meilleure réponse. Bougresse...
- Les gens ne remarquent pas les détails, mais cela ne veut pas dire qu'ils ne sont pas affectées par eux dans les conditions de la fatigue oculaire ou juste la vague impression d'une page à la recherche de moins en moins bien ficelé ou professionnel sans être en mesure d'identifier exactement comment. Si il n'y a pas un lourd tribut à être payés à la performance ou la maintenabilité ou de meilleures pratiques, d'investir un peu de temps sur des détails que tout le monde ne remarquerez consciemment vaut encore la peine de l'OMI.
- Ouais, @ErikReppen, je n'ai pas vraiment de soins pour le ton initial de ce soit. Essayez d'avoir un client qui constate la différence; il devient important. D'autant que ce n'est pas une simple question de "il ne regarde pas le même sur les deux", c'est "une police ressemble à de la merde." Quant à la solution, cependant, ne sont pas de texte-rendu et -webkit-font-smoothing PAS disponible sur n'importe quelle version de IE?caniuse.com/#search=-webkit-font-smoothing
- Le "système de polices", a mentionné, seulement la moitié environ sont généralement installés les polices système, le reste sont des polices web qui sont certainement pas installé, à moins que vous êtes sorti de votre façon de faire.
- Ils sont effectivement utilisés. Firefox utilise Fira Sans
InformationsquelleAutor Rick Lancee
6

text-rendering: optimizeLegibility le crénage est appliqué à la police, qui peut d'améliorer la lisibilité, mais seulement si la résolution de l'écran et la taille de police est assez élevé. Il ne fait pas la police tout de plus en plus audacieux, s'il était trop mince avant.

Ici, le problème pourrait être de la police des familles qui ont une ou plusieurs faces qui sont plus léger que la normale (font-weight:400) – comme les Lunettes de Lato.

Si vous chargez la lumière à faces normales de Lato comme ce
```
@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);
```
J'ai fait le constat que la plupart des Fenêtres des navigateurs Chrome et OSX utiliser font-weight:100 si vous ne spécifiez rien plus léger de 400 (ou normal, régulier). La modification de la police-poids: 200 ou 300 ne rend pas du tout différent, bien que l'inspecteur des outils d'insister pour que la machine est en affichant par exemple, la police-poids:200. Il ne l'est pas.

Enlever les poids léger (100 dans mon cas) résout le problème, et ça me permet au moins d'utiliser font-weight:200, respectivement. Le rendu n'est pas absolument identique sur tous les navigateurs, mais semblable au moins.
```
@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);
```
Bien sûr, cela ne résout pas le problème de ne pas être en mesure d'accéder à la lumière de la police du poids spécifié.

InformationsquelleAutor Alex Koch
5

Il n'y a pas de correctif pour cette, pour autant que je suis au courant. C'est plusieurs correctifs mis en œuvre pour s'adapter à chaque navigateur, sauf IE. Donner à ces un coup:

Pour Chrome, et tout autre navigateur en utilisant webkit:
```
-webkit-font-smoothing:antialiased !important;
```
Lieu que dans le html, CSS, ou pour une autre éléments que vous voyez l'ajustement. Vous pouvez également l'ajouter ainsi que le ci-dessus:
```
text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
```
Expérimenter avec différentes valeurs alpha, mais vous devez garder à l'ombre des tailles comme ils sont.

Je suis pas au courant de quoi que ce soit d'autre, vous pouvez le faire, mais cela devrait répondre le plus gros problème avec Chrome, à tout le moins (en plus d'autres navigateurs webkit).
- Aucune de ces semblait faire les choses différemment, même dans Chrome. Même si elle a fait un travail, mon site ne peut pas être exclusif à google Chrome.
- Compréhensible. Le point était de résoudre le pire problème, de sorte que l'ensemble du problème ne serait pas aussi mauvais. Quant à elle, ne faire aucune différence, vous êtes-vous sûr de faire un ctrl+F5 pour vider le cache? Qui va pour Ryan de répondre ainsi. Parfois, vous ne verrez pas un changement de CSS jusqu'à ce que vous le faites.
- Je vais essayer cela et voir si cela fonctionne.
- Non, c'est toujours la même qu'avant.
- Hmm. J'ai peur, j'ai rien d'autre. En faisant un peu de recherche autour de ce site confirme il n'y a pas grand chose d'autre que vous pourriez essayer: stackoverflow.com/questions/17864742/...
- Comme beaucoup de polices de caractères paramètres, il hérite de la balise body. Vous pouvez déposer sur y si vous voulez toutes les polices anti-aliasées. Aucune idée de ce que le rendu-l'impact sur les performances de faire ce que pourrait être hier dans le web mobile type de vue des situations est, mais pour un node-webkit application destinée à un kiosque-type de scénario, il fonctionne très bien.
InformationsquelleAutor Hiigaran
5

Je trouve que dans Google Chrome, vous pouvez ajouter -webkit-text-stroke pour améliorer l'apparence des polices.

par exemple:

-webkit-text-stroke: .025em rgba(51,51,51,0.50);
- Je suis désolé. J'ai besoin d'une réponse universelle... pour au moins IE, Firefox, Chrome et Safari.
- Fondamentalement, c'est un faux effet bold.
- Pour le meilleur résultat dans le chrome, l'usage massif de l'avc et de l'utilisation de la même couleur que votre police. Par exemple, si votre texte est noir utilisation: -webkit-texte-avc: .025em rgba(0,0,0,1);
- C'est vraiment la meilleure solution si vous êtes à la recherche d'une solution pour le Chrome. Cela améliore vraiment la façon dont les polices de regarder dans l'Atome, -webkit-text-stroke: 0.025em; est bon.
InformationsquelleAutor jono
2

Je pense que c'est plus un problème Windows que d'un navigateur problème. Les mêmes navigateurs rendre les polices de caractères beaucoup plus en douceur sur d'autres systèmes d'exploitation comme Linux ou Mac.

Dans Chrome, et, par extension, de tout navigateur webkit, vous pouvez utiliser le code suivant pour lisser vos polices:
```
-webkit-font-smoothing: antialiased;
```
ou
```
-webkit-font-smoothing: antialiased !important;
```
Généralement, je trouve que cela ne va pas faire beaucoup. Je pense que nous devrons simplement attendre pour Microsoft de faire quelque chose à ce sujet.
- "peut utiliser le code suivant pour ajouter de l'anti-aliasing de vos polices" n'est pas correct: antialiased seulement enlève le sous-partie de la valeur par défaut, qui est subpixel-antialiased quand il n'est pas déjà antialiased. La sous-partie qui est responsable de l'bords colorés.
InformationsquelleAutor Cameron Brown

Je l'utiliser sur tous les sites et couvre la plupart des problèmes avec le rendu des polices.

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;

InformationsquelleAutor Tyrone

2

J'ai rencontré un problème similaire récemment, la même famille de polices et la taille ont regardé différemment sur Chrome, safari et Firefox. Le chrome et firefox regardez surtout plus épais. Cela pourrait ne pas être le meilleur moyen, mais il a travaillé pour moi
```
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
```
Aussi, sa valeur d'un certain temps pour passer à la caisse les différents moteurs de rendu.
CSS Quels sont -moz - et -webkit-?

InformationsquelleAutor Isaac Guan
1

Vous pourriez être en mesure de régler cette situation à l'aide de la propriété css text-rendu.

Exemple:
```
text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit
```
Vous auriez probablement souhaitez utiliser le texte-rendu:optimizeLegibilty.

Plus d'informations ici: MDN Texte-Rendu
- J'ai essayé text-rendering:optimizeLegibilty, et il m'a donné le même résultat qu'auparavant dans IE, Firefox et Chrome.
- Malheureusement, les navigateurs ne semblent pas mettre en œuvre correctement même si ce serait un très pratique de la propriété et de la documentation sur MDN dit qu'il allait travailler.
InformationsquelleAutor Ryan Ausel
0

Im va précéder cette avec ses un hack et je n'aime pas, mais il fonctionne
```
transform: rotate(-0.0002deg)
```
Il rend les polices sensiblement lisse, quoique légèrement plus mince

InformationsquelleAutor Luke Robertson
0

Il est tard, mais avez-vous déjà essayé de l'indice les fichiers de police?
Aller transfonter site et de télécharger vos fichiers de police. Les options de la zone de vérifier les auto option d'allusion.

InformationsquelleAutor Abdullah

Vous devez vous connecter pour publier un commentaire.

Edit 1: DirectWrite est maintenant sur google chrome pour windows qui sera améliorer le rendu.

Edit 2 (2017): l'INTERFACE utilisateur du Système de polices