La fuente se ve diferente en photoshop y en el sitio web

Question

Pregunta simple: ¿Por qué estas 2 fuentes se ven diferentes en Photoshop y en el sitio web?

En esta imagen, este primer texto es del código html, la segunda es una imagen de photoshop. La misma fuente, el mismo tamaño - 30. Pero esto primero parece más "audaz" que el segundo. ¿Por qué? Quiero tener una fuente idéntica a como está en photoshop (segunda imagen).

Aquí código CSS:

@font-face { 
font-family: "SegoeWP"; 
src: url("fonts/play/SegoeWP.eot"); 
src: url("fonts/play/SegoeWP.eot?#iefix") 
     format("embedded-opentype"), 
    url("fonts/play/SegoeWP.woff") format("woff"), 
    url("fonts/play/SegoeWP.ttf") format("truetype"), 
    url("fonts/play/SegoeWP.svg#PlayRegular") format("svg"); 
font-weight: lighter; 
} 

#strona { 
    width: 1120px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#Section1 
{ 
     font-family: "SegoeWP", Tahoma, Arial, sans-serif; 
     font-size: 30px; 
} 



header, footer, article, section, hgroup, nav, figure { 
    display: block; 
} 


body { 
    font-family: "SegoeWP", Tahoma, Arial, sans-serif; 
    background-image:url('background.jpg'); 
    background-repeat: no-repeat; 
    background-position: top center; 
    color: #ffffff; 

} 

y código html.

<section id="Section1"> { mywebsite.NET } </section> 
    <img src="mojeportfolio.png" /> 

¿Alguna idea? ¡Saludos!

MÁS

he hallado: que tengo 3 tipos de fuentes SegoeWP en carpeta. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" parece un poco "audaz", pero este "SegoeWP-Light" es perfecto y se ve igual que en Photoshop cuando hago doble clic en él. ¿Cómo puedo usarlo en mi sitio web? Cuando cambio esta parte -> url ("fonts/play/SegoeWP-Light. *"), Nada cambia en el sitio web. ¿Qué está mal?

Answer 1

maneja photoshop fuentes mucho diferente que un navegador web ... Ya que Photoshop utiliza funciones como alisado, de almendra y otros la fuente casi siempre tendrá un aspecto diferente en un navegador

Answer 2

Asegúrese de que está agregando el css a la la ubicación correcta a veces podría ser el problema. Para notas sobre cómo disminuir el peso de una fuente que puede encontrar aquí:

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight

Answer 3

Para obtener el mismo resultado, intente utilizar font-smoothing: antialiased, y reduciendo el tamaño de la fuente para que coincida con su imagen de Photoshop.

La mayor diferencia se debe a que Adobe Photoshop no aplica suavizado de fuentes subpixel, a diferencia de la mayoría de los navegadores. En su imagen de ejemplo, esto es fácilmente visible si hace un acercamiento (vea los cambios de color alrededor de los bordes). Windows tiene un historial de usar una forma extra nítida de representación de fuentes subpixel, lo que agrava el problema ya que el peso de la fuente percibida puede cambiar severamente.

Smashing Magazine tiene una excelente article en la representación de fuente.