Rendu des polices pour les pages Web

Question

Je rencontre toujours le même problème lors de la création de pages Web. Quand j'ajoute une police qui est plus grande alors environ 16-18px cela a l'air terrible. C'est déchiqueté, et pixélisé. J'ai essayé d'utiliser des polices et des poids différents, mais je n'ai pas eu beaucoup de chance là-bas.

Note: C'est seulement dans les fenêtres que c'est comme ça. Principalement dans Opera et FF également dans IE7 mais pas tout à fait aussi mauvais. Sous Linux, la police a l'air bien. Je n'ai pas regardé un Mac.

Que faites-vous pour résoudre ce problème? si quelque chose. J'ai remarqué que les titres ici sur SO sont aussi assez irréguliers mais ils sont juste assez petits pour ne pas avoir l'air mauvais.

Answer 1

Vous ne pouvez rien faire pour forcer l'utilisateur à modifier la manière dont son système d'exploitation affiche les polices. Si c'est un gros problème pour vous, vous pouvez remplacer les grands titres par des images, cela vous permet de contrôler exactement comment la police est rendue (et assure que le titre ressemble exactement à ce que vous souhaitez, même si l'utilisateur n'a pas police installée).

Si vous faites cela, assurez-vous de fournir une autre représentation textuelle pour ceux qui ne voient pas les images. J'ai tendance à utiliser CSS pour afficher une image d'arrière-plan et masquer le contenu de l'en-tête. Comme ça.

<style> 
    h1 
    { 
     height: 32px; 
     width: 100px; 
     background: url("path/to/image") 
    } 

    h1 span 
    { 
     display: none; 
    } 
</style> 

<h1> 
    <span> 
     Heading Text 
    <span> 
</h1> 

Pour être honnête, cela semble être exagéré si c'est sur tout le texte volumineux. Et sachez que cela augmentera la quantité de données que vos clients doivent télécharger. Cependant, pour un grand en-tête, cette méthode peut mener à quelque chose de plus beau que le texte rendu par le système d'exploitation.

Answer 2

L'activation de l'anti-aliasing devrait résoudre le problème d'affichage.

Answer 3

En plus de l'anti-aliasing, essayez d'activer le type clair.

Answer 4

Sous Windows, l'activation de ClearType permet de résoudre ce problème. Cependant, vous ne pouvez pas forcer les utilisateurs à l'utiliser. Ce n'est pas un problème de navigateur. C'est la méthode de lissage des polices du système d'exploitation.