Cuando diseño en Photoshop, mis fuentes son finas y nítidas, pero cuando declaro las fuentes en CSS, incluso cuando uso font-weight: más ligero, las fuentes siempre aparecen más audaces.Pesos de fuente Web Safe - ¿Cómo hacerse más delgado?
Tal vez así es como el navegador representa la fuente (en las fuentes IE se mantienen delgadas), pero me preguntaba si había trucos o consejos para lograr la misma apariencia delgada y nítida.
Tiene razón, es una diferencia en la representación. La forma en que se representa el texto depende de su sistema operativo, su configuración y su navegador (Safari, por ejemplo, se vuelve más brillante que IE). Por lo tanto, no hay forma de que esta representación coincida con tu comp de photoshop.
un poco más información aquí:
representación de fuentes puede ser complicado. Desafortunadamente, diferentes navegadores mostrarán la misma fuente de manera diferente.
En lo que respecta a CSS, la configuración font-weight:100 asegura que se utilizará el peso más ligero disponible. Es posible que también 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 originaria de OSX.
Su mejor apuesta es realmente http://www.google.com/fonts/
También cabe destacar:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
que no creen cualquiera de las fuentes web universales tiene un peso muy delgada en todos los navegadores. Sin embargo, hay maneras de incorporar fuentes personalizadas en todos los navegadores más importantes hoy en día.
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
Cualquiera de estas herramientas puede conseguir que casi cualquier tipo de fuente que se puede imaginar. Solo ten cuidado con los derechos de autor en el último.
Uso de CSS para suavizar hasta sus fuentes ...
poner esto en tu CSS:
-webkit-font-smoothing: antialiased;
esto es realmente algo que ayuda. al menos para navegadores webkit! compruebe también esta respuesta a una pregunta similar: http://stackoverflow.com/a/4012154/336235 –
¿Existe alguna solución de este tipo disponible para Opera, IE y Firefox? –
Si el diseño de la fuente no importa, esta es una solución rápida, pero en realidad no hacen que el fuente más nítida, ya que solo es la fuente seleccionada que tiene un peso de fuente más ligero disponible (o la fuente misma está diseñada con líneas finas). – einord