web-dev-qa-db-fra.com

Web Safe Font Weights - Comment devenir plus mince?

Lorsque je conçois dans Photoshop, mes polices sont fines et nettes, mais lorsque je déclare des polices en CSS - même lorsque vous utilisez un poids de police: plus léger - les polices apparaissent toujours plus audacieuses.

C'est peut-être juste la façon dont le navigateur rend la police (In IE restent fines), mais je me demandais s'il y avait des astuces ou des conseils pour obtenir les mêmes looks fins et nets.

cssfonts
25
HWD

Tu as raison, c'est une différence de rendu. Le rendu du texte dépend de votre système d'exploitation, de vos paramètres et de votre navigateur (Safari, par exemple, est plus audacieux qu'IE). Il n'y a donc aucun moyen de faire correspondre ce rendu à votre composition Photoshop.

Un peu plus d'informations ici:

Choix du navigateur vs rendu des polices | Phinney on Fonts

2
spiral

Utilisez CSS pour lisser vos polices ...

mettez ceci dans votre CSS:

-webkit-font-smoothing: antialiased;
26
Caleb Crosby

Le rendu des polices peut être compliqué. Malheureusement, différents navigateurs afficheront la même police différemment.

En ce qui concerne CSS, la définition de font-weight:100 garantit que le poids le plus léger disponible sera utilisé. Vous pouvez également définir -webkit-font-smoothing:antialiased.

<style type="text/css">
   body {
      font-family:"Helvetica Neue", Arial, sans-serif;
      font-weight:100;
      -webkit-font-smoothing:antialiased;
   }
</style>

Helvetica Neue est une police très fine native d'OSX.

Votre meilleur pari est vraiment http://www.google.com/fonts/

A noter également:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator

17
tybro0103

Je ne crois pas que l'une des polices Web universelles ait un poids très mince dans tous les navigateurs. Cependant, il existe aujourd'hui des moyens d'incorporer des polices personnalisées dans tous les principaux navigateurs.

http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator

Chacun de ces outils peut vous fournir à peu près n'importe quel type de police que vous pouvez imaginer. Soyez juste prudent avec les droits d'auteur sur le dernier.

1
tybro0103