2013-01-08 5 views
0

Sur Windows 8 avec Chrome, les grandes polices de texte ne sont pas lisses. Cependant j'ai réussi à voir quelques sites qui ont des textes lisses (même environnement).Smooth Fonts sur Windows, comment ces deux sites avec Twitter Bootstrap réalisent-ils cela?

Première: http://twitter.github.com/bootstrap/examples/hero.html

Le "Bonjour, monde!" est lisse, cependant les textes "en-tête" en bas ne sont pas lisses comme vous pouvez le voir, même s'ils sont plus petits.
enter image description here


L'autre est http://www.asana.com. Sur leur page d'accueil le texte "Do Great Things" est lisse.
enter image description here


Maintenant, les deux pages utilisent Twitter Bootstrap CSS.

Quand je regarde le style calculé pour l'élément HTML correspondant sur les outils de développement Chrome je vois ces valeurs:

background-color: transparent; 
border-bottom-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-top-left-radius: 0px; 
border-top-right-radius: 0px; 
color: #333; 
display: block; 
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
font-size: 60px; 
font-weight: bold; 
height: 60px; 
letter-spacing: -1px; 
line-height: 60px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 10px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
text-rendering: optimizelegibility; 
width: 1050px; 

J'ai vu que Asana utilise une police appelée Proxima-nova-condensé, mais quand je il n'est pas lisse pour moi, même avec le rendu de texte: optimizelegibility.

Avez-vous une idée de comment y parviennent-ils? Je voudrais apprendre comment puis-je le faire sans Twitter Bootstrap (ou avec Bootstrap si je dois).

+1

[Il me semble doux] (http://jsfiddle.net/St6FP/). Je ne suis pas sûr qu'ils font quelque chose de spécial avec leurs polices? – jmeas

+0

So font-size: 48px; n'est pas lisse mais la taille de police 50px et 60px est lisse. Qu'est-ce que ...? – Seregwethrin

Répondre

1

Le rendu des polices varie. Si vous regardez de près le rendu (par exemple, prenez une capture d'écran et agrandissez les pixels), vous verrez qu'il y a juste une variation dans le lissage. Vous ne pouvez pas faire grand-chose (sauf en partie dans l'environnement Mac), vous pouvez donc simplement tester que votre texte semble tolérable sur différentes plates-formes et navigateurs.

Questions connexes