Le visage de police chargé sur Windows est vraiment mauvais. Quelles polices utilisez-vous qui rendent mieux?

27

EDIT : Le problème était que je n'avais pas activé "Cleartype" dans mes paramètres sur Vista. Cette question peut ne pas avoir beaucoup de sens si Cleartype est installé / activé sur le système d'exploitation Windows.


Un nouveau vent de typographie est arrivé sur le web, avec la propriété font-face de CSS3 capable de charger des polices autres que l'ensemble OS / système. Mon Mac en rend plusieurs parfaitement, contrairement à ma machine Windows. Quel jeu de polices dois-je utiliser pour un meilleur rendu sous Windows?

Ceci est similaire à une question sur Stack Overflow.

Et voici un exemple d'un site web qui a l'air mal rendu sur PC avec Myriad Pro: http://css-tricks.com/

REMARQUE: je ne parle pas de la différence d'anticrénelage entre les versions de navigateur (comme entre IE9 et IE6).

J'attends en réponse à vos tests, une liste de polices plus la taille (veuillez utiliser px) à quoi elles ressemblent bien, ou du moins de manière à ce qu'elles puissent être utilisées pour du texte court ou des petits titres.

Par exemple, en ce moment, "League Gothic, 30px" ressemble à ceci:

entrez la description de l'image ici

Littlemad
la source
Pouvez-vous fournir plus de détails: sur quels navigateurs ne s'affiche-t-il pas bien? Pouvez-vous montrer quelques exemples de captures d'écran? Il peut y avoir un problème de base sous-jacent avec le rendu ici plutôt qu'un problème de police
Pekka prend en charge GoFundMonica
2
Ce n'est pas seulement une question de navigateur, mais de système d'exploitation. Windows a un rendu des polices différent de celui des Mac OS. Je n'ai pas de mac avec moi (seulement un Ipod Touch) pour le moment, et je ne peux pas montrer la différence, mais même sur un navigateur bien rendu pour l'anticrénelage, face-font ce n'est pas bien implémenté pour les polices OS non standard. Je me demandais (parce que j'ai un ensemble limité de polices), quelle personne utilise qui n'est pas mal rendue sur PC.
Littlemad
@Yi Jiang: Exactement parce que la quantité de polices est énorme, et il n'est pas possible de tout tester, ou de tout avoir, que je demande quelles sont, d'après l'expérience de tout le monde, quelles sont les "polices et tailles sûres" utiliser. Je peux voir que personne n'a posté quoi que ce soit, et je ne sais pas si quelqu'un publiera quelque chose (ou a essayé d'analyser le rendu des polices sur PC), donc je suis plus triste de ne pas avoir de commentaires.
Littlemad
"sorte de décent" est purement subjectif.
DA01

Réponses:

18

Cela devrait être un commentaire (donc faire cette CW), mais je pense qu'il y a des malentendus et des hypothèses erronées dans la question. Puisque vous voulez évidemment que cette question reçoive une réponse (vous avez finalement offert une prime), voici mes deux cents.

À partir de votre capture d'écran, il me semble que vous avez configuré votre Windows pour rendre les polices régulièrement (par opposition au rendu en sous-pixels) et probablement votre navigateur ne fait pas d'anticrénelage (c'est possible, mais alors c'est parti avec la compression JPG).

Les exemples suivants concernant les fenêtres proviennent de XP Pro SP 3, il est donc assez sûr de supposer que la situation est au moins au même niveau dans Vista et 7.

Windows a (sous XP) des options pour utiliser ClearType ou non. Sans ClearType, les polices s'affichent comme dans votre capture d'écran. Il s'agit d'une image fortement agrandie de la boîte de dialogue de Windows sans CT:

preuve 1

Vous voyez que c'est une opération binaire: le pixel est noir ou transparent. Maintenant, avec certains navigateurs modernes, même sans CT, ils font de l'anti-aliasing. Cela vient de css-tricks.com avec Windows XP et Chrome 8 et CT est désactivé (comme c'était le cas dans l'image précédente):

preuve 2

Vous voyez ce qui s'est passé? Vous l'avez probablement déjà fait, comme vous l'avez dit dans votre question.

REMARQUE: je ne parle pas de la différence d'anticrénelage qu'il existe entre les nouveaux navigateurs et les anciens (comme entre IE9 et IE6).

Maintenant, le ClearType !

Voici exactement le même texte de la boîte de dialogue Windows, cette fois avec CT: preuve 3

Si vous êtes intéressé par ce sur quoi cela se base, consultez l'article Wikipedia sur le rendu des sous-pixels . Et l'activation de ClearType affecte-t-elle le rendu du navigateur? Même "autre" texte avec Windows XP et Chrome 8 et ClearType est activé: preuve 4

Cela fait! Et pendant que nous y sommes, je pourrais ajouter que (au moins) IE 8 utilise le rendu ClearType même s'il est désactivé au niveau Windows.


La comparaison de texte antialiasé et ClearTyped à 100% n'est pas aussi radicale que la comparaison de texte ClearTyped à non antialiasé. Il est cependant plus audacieux:

aa: preuve 5CT:preuve 6

Pour voir à quoi cela ressemble sans antialiasing, regardez simplement la capture d'écran de littlemad .

Et à titre de comparaison, voici le même "autre" dans le rendu par défaut d'OS X: preuve 7 encore plus audacieux que ClearType.


Pour répondre à votre question: n'importe quelle police . Si votre système d'exploitation rend la police différemment, cela peut être dû au fait que vous avez configuré votre système d'exploitation pour rendre les polices de cette manière . OU il se peut que votre navigateur ne soit pas capable d'anti-crénelage ou de ClearType.

Une autre question serait de savoir pourquoi certaines polices s'affichent correctement et d'autres pas - si tel est le cas (mais je ne vois aucun problème sur le site que vous avez mentionné sous Windows). Ou demandez-vous des polices qui auraient l'air adéquates sans aucun rendu?


Et voici également la réponse à la question fréquemment posée: "Oui, je sais tout cela - pourquoi ClearType est-il différent du rendu d'OS X?!"

Parce qu'ils sont différents. Le rendu en sous-pixels n'est pas une chose légère à implémenter. ClearType est la marque déposée de Microsoft et elle est protégée par 10 brevets (+ 1 en instance; voir wikipedia ). Ils ne peuvent tout simplement pas être les mêmes.

koiyu
la source
Ceci est un CW, alors modifiez-le si je me trompe; ou ajoutez des détails si vous en connaissez.
Jari Keinänen
2
Grande explication koiyu, c'était comme je le soupçonnais, mais je ne pouvais pas être sûr jusqu'à ce qu'il ait posté une capture d'écran
JamesHenare
Votre message me fait douter. J'ai vérifié mes paramètres et je me suis souvenu que lors de l'installation de l'OS Vista, j'ai réduit au minimum tous les effets pour améliorer les performances. Et devine quoi? Cleartype était désactivé. Je suis une personne tellement stupide, désolée pour l'incommodité. Désormais, les polices sont beaucoup plus belles et certainement lisibles. Alors sachez que ma question est plus: à partir de quel OS Cleartype n'est pas installé sur Windows?
Littlemad
@Littlemad pas de problème :) Il m'a également été utile de vérifier les sources afin de pouvoir fournir une sorte de réponse au lieu d'une simple opinion .
Jari Keinänen
1
@Littlemad, cleartype a été introduit pour la première fois dans Windows XP, mais désactivé par défaut. À partir de Windows Vista, il est désormais activé par défaut. Toujours dans Internet Explorer 7, il est activé même s'il n'est pas activé dans tout le système d'exploitation. Source: en.wikipedia.org/wiki/ClearType
JamesHenare
2

Si le problème est le même que la question Stackoverflow à laquelle vous faites référence, la réponse n'est-elle pas également la même ?

C'est un problème d' allusion .

Lorsque vous générez votre kit de polices (comme dans FontSquirrel), vous devez spécifier le conseil sur les options expertes.

Choisissez Expert, et sous Rendu, sélectionnez:

Appliquer l'indice - Améliorer le rendu Win.

JamesHenare
la source
1
Non, ce n'est pas pareil, Hinting ne résout pas le problème. J'utilise déjà la solution publiée sur le Web à propos de Font-Face que Fontsquirell utilise. Ce que je recherche c'est: même si on ne rend pas bien une police, laquelle semble assez décente pour être utilisée sur le PC? et sur quelle taille de police? Je recherche une liste de polices sûres à une taille sûre. Une sorte de référence aux "meilleures pratiques".
Littlemad
Une meilleure pratique consiste à ne pas utiliser de polices Web intégrées pour les tailles de texte. Ils ne sont pas optimisés pour cela. Laissez-les pour les titres et les en-têtes.
DA01
1
@ DA01: Je suis concepteur de sites Web, je veux concevoir et utiliser une bonne typographie, je ne peux pas simplement ignorer les polices, je veux savoir quelles sont les polices acceptables pour pouvoir les utiliser.
Littlemad
@Littlemad Je suis également un concepteur de sites Web qui souhaite concevoir et utiliser une bonne typographie. Je sais que l'intégration de la police, au moins pour l'instant, utilise principalement des polices de caractères qui ne sont pas optimisées pour les petites tailles de texte sur les écrans. Ils manquent souvent d'indices et leurs métriques peuvent varier énormément, causant des ravages si le visage intégré n'est pas disponible pour un utilisateur particulier. Utiliser des polices système optimisées pour les tailles de texte sur les écrans, c'est utiliser une bonne typographie.
DA01
1
@ DAO1: Oui, je ne suis pas non plus un grand fan de ce modèle, mais j'essayais de souligner que c'est une question de bonnes vs mauvaises polices, pas que les polices intégrées sont intrinsèquement mauvaises.
Russell Leggett
1

ttfautohint peut être utilisé pour reconstruire le bytecode d' indication de la police; les paramètres par défaut (compatibles GDI) devraient aider les fenêtres à restituer la police.

Tobu
la source
0

Cela n'a rien à voir avec le navigateur, mais Windows lui-même.

* Les systèmes nix (unix / linux et OSX sont inclus dans cela car il a une base Unix) ont la possibilité de contrôler finement la façon dont le texte est affiché, et sont généralement définis sur un rendu sous-pixel (qui a une explication beaucoup plus technique que ce que je Je vais vous donner, mais il utilise essentiellement les sous-pixels (les parties rouge, verte et bleue des pixels de votre écran) pour rendre le texte) où Windows utilise le type clair, qui est son propre type de rendu que je suis un peu floue sur la mécanique.

À peu près, c'est juste que Windows ne rend pas les sous-pixels, ce ne sont pas les polices ou les fichiers, mais le système d'exploitation qui affiche ces polices et ces fichiers.

dkuntz2
la source
Merci pour l'explication, mais je sais que le problème est Windows, mais je demande plus: quel type de polices avez-vous testé ou utilisé sur votre site Web / client-site Web que vous utilisez et qui semble toujours "assez" décent sur Windows?
Littlemad
En fait, cela varie d'un navigateur à l'autre. Firefox et IE afficheront la même police différemment, ne serait-ce que parce que l'un utilise EOT et l'autre utilise OTF / TTF / WOFF. Et ClearType utilise également le rendu sous-pixel. Beaucoup de gens préfèrent simplement l'anticrénelage des polices d'OS X aux options de Windows.
Calvin Huang
@Littlemad qu'entendez-vous par "assez décent", je veux dire que je me suis juste abandonné au fait qu'il ne rend pas bien. Voici pour Windows 8.
dkuntz2
@Calvin Huang: oui, je connais la différence de rendu du navigateur, mais ce n'est pas le problème principal. Il est lié au système d'exploitation. Le navigateur d'aujourd'hui rend décemment l'alias des polices. Windows toujours pas. @DKuntz: Que voulez-vous dire par "Windows 8"? Je vois beaucoup de gens utiliser dans un site Web important la police de caractères, et c'est vraiment vraiment moche de voir un bon designer faire ça. Je recherche donc une solution moins maléfique, toujours mal rendue, mais au moins assez décente pour ne pas ressembler à un texte Commodore 16. Sinon, je dois utiliser une solution js pour vérifier votre navigateur et passer un style css si vous êtes mac ou pc
Littlemad
4
Cette explication est incorrecte, ou du moins incomplète. Windows fait l' anti-aliasing sous - pixel - c'est ce que Cleartype est, et est là depuis XP. Par rapport à OS X, Windows ne fait pas le rendu des polices de façon incorrecte , il le fait différemment - la différence est au mieux subjective, et vous trouverez des gens qui préfèrent la façon dont les polices sont rendues sur Windows. En plus de cela, les navigateurs sous Windows utilisent également différentes méthodes de rendu - par exemple, toutes les polices de grande taille sur Firefox jusqu'à 3.6 sous Windows afficheront des jaggies visibles. Ce problème est résolu dans la version 4 en passant à l'API DirectWrite.
Yi Jiang
0

Utilisez le code ci-dessous en CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Cela pourrait vous aider

designer web indépendant hyderab
la source
2
Pouvez-vous mieux montrer un morceau de code pour montrer aux lecteurs ce que vous voulez dire?
Mensch