css - para - Pesos de fuentes seguras en la web: ¿cómo adelgazar?

fuentes html para web

Question

Cuando diseño en Photoshop, mis fuentes son finas y nítidas, pero cuando declaro fuentes en CSS, incluso cuando uso font-weight: light, las fuentes siempre aparecen más en negrita.

Tal vez sea así como el navegador reproduce la fuente (en el IE las fuentes son escasas), pero me preguntaba si había algún truco o consejo para lograr la misma apariencia delgada y nítida.

Answer 1

La representación de fuentes puede ser complicada. Desafortunadamente, diferentes navegadores representarán la misma fuente de manera diferente.

En lo que respecta a CSS, establecer font-weight:100 garantiza que se utilizará el peso más ligero disponible. También es posible que desee establecer -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 es una fuente muy delgada nativa de OSX.

Tu mejor apuesta es realmente http://www.google.com/fonts/

También digno de mención:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator

Answer 2

No creo que ninguna de las fuentes web universales tenga un peso muy reducido en todos los navegadores. Sin embargo, existen formas de incrustar fuentes personalizadas en los principales navegadores de la actualidad.

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

Cualquiera de estas herramientas puede proporcionarle cualquier tipo de fuente que pueda imaginar. Solo ten cuidado con los derechos de autor en el último.

Answer 3

Tienes razón, es una diferencia en la prestación. La forma en que se reproduce el texto depende de su sistema operativo, su configuración y su navegador (Safari, por ejemplo, se vuelve más audaz que IE). Por lo tanto, no hay forma de hacer que esta representación coincida con su comp de photoshop.

Un poco más de información aquí:

Elección del navegador frente a la representación de fuentes | Phinney en Fuentes

Answer 4

Usa CSS para suavizar tus fuentes ...

pon esto en tu CSS:

-webkit-font-smoothing: antialiased;