Schriftart sieht anders auf Photoshop und auf der Website

Question

Einfache Frage: Warum diese 2 Schriftarten sieht anders aus in Photoshop und auf der Website.

Auf diesem Bild - dieser erste Text stammt aus HTML-Code, zweitens ist ein Bild aus Photoshop. Die gleiche Schriftart, die gleiche Größe - 30. Aber das sieht zuerst mehr "fett" als zweitens. Warum? Ich möchte eine identische Schriftart haben, wie es bei Photoshop (zweites Bild) ist.

Hier CSS-Code:

@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; 

} 

und HTML-Code.

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

irgendwelche ideen? Schöne Grüße!

MEHR

ich fand, dass ich drei Arten von SegoeWP Schriftart im Ordner. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" sieht ein wenig zu "fett" aus, aber dieses "SegoeWP-Light" ist perfekt und sieht genauso aus wie in Photoshop, wenn ich es doppelt anklicke. Wie kann ich es auf meiner Website verwenden? Wenn ich diesen Teil -> url ("fonts/play/SegoeWP-Light. *") Ändere, ändert sich nichts auf der Website. Was ist falsch?

Answer 1

Photoshop behandelt Schriften viel anders als ein Web-Browser ... weil Photoshop Funktionen wie Glätten, Kernel und andere die Schrift fast immer anders aussehen in einem Browser

Answer 2

Stellen Sie sicher, dass die CSS die hinzufügen richtige Lage manchmal könnte das Problem sein. Für die vollständigen Hinweise, wie das Gewicht einer Schrift zu verringern, können Sie es hier finden:

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

Answer 3

um das gleiche Ergebnis zu erhalten versucht font-smoothing: antialiased verwenden, und die Verringerung der Schriftgröße, so dass es Ihr Photoshop-Bild übereinstimmt.

Der größte Unterschied ist, dass Adobe Photoshop im Gegensatz zu den meisten Browsern keine Subpixel-Schriftglättung durchführt. In Ihrem Beispielbild ist dies leicht sichtbar, wenn Sie hineinzoomen (siehe die Farbverschiebungen an den Kanten). Windows hat eine Geschichte der Verwendung einer extra knackigen Form von Subpixel-Font-Rendering, die das Problem verschärft, da sich das wahrgenommene Schriftgewicht stark verändern kann.

Smashing Magazine hat eine hervorragende article on font rendering.