Google Web Fonts (css) ist nicht dasselbe wie in Photoshop

Question

Ich habe Fonts von Google Web Fonts heruntergeladen, um mein Psd-Projekt zu verwenden, es ist okey so weit. Aber in meinem HTML sehen meine google Web Fonts anders aus, wie Sie unter den Bildern sehen;

meine psd

und meine html

font-size

font-family

line-height

font-weight alle gleiche wie Photoshop aber Schriftarten sehen anders aus. ..

und ich hinzugefügt Körper

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 

aber nichts ändern ..

durch die Art und Weise meine Schrift ist Hind Fonts

Answer 1

Alle Browser-Schriften etwas anders, unabhängig, Schriftwiedergabe machen wird, ist auch ist abhängig von Ihrem Betriebssystem.

Eine andere Sache, die bewirken kann, wie Ihre Schriftarten aussehen, ist, wie der Designer das Text-Anti-Aliasing in Photoshop eingestellt hat. Text-Anti-Aliasing wird hier auf dem oberen Menüleiste gesteuert (mit Text-Werkzeug ausgewählt):

Unten ist die Hind Schriftart-Set mit 5 verschiedenen Anti-Aliasing-Einstellungen:

Beachten Sie, dass insbesondere die starke Anti-Aliasing-Einstellung das Aussehen der tatsächlichen Zeichen ändert. Ohne Ihren tatsächlichen Code zu sehen, ist es schwierig, ein Problem zu vergleichen und zu diagnostizieren, das außerhalb von Photoshop

Answer 2

ist. Sie müssen daran denken, dass jeder Browser die Schrift anders darstellt. Photoshop verfügt über wesentlich mehr Zeichensatzfunktionen als ein Webbrowser. Jeder Browser und jedes Betriebssystem verfügt über eine eigene Rendering-Engine. Selbst wenn Sie es in einer Browser/Betriebssystem-Kombination gleich nutzen könnten, würde es in einem anderen Browser anders aussehen.

Sie können Schriftart Rendering leicht mit text-rendering beheben. Diese -Eigenschaft stellt Informationen für die Rendering-Engine bereit, die bei der Textwiedergabe optimiert werden sollen, auf .

Es ist nicht in einem CSS-Standard definiert - es ist nur eine SVG-Eigenschaft. Mit Gecko/WebKit/Blink-Browser können Sie diese Eigenschaft jedoch auf HTML-Elemente anwenden.

Einige Schriftart-Dateien enthalten zusätzliche Informationen darüber, wie die Schrift gemacht und optimizeLegibility macht

so können Sie verwenden Verwendung dieser Informationen werden sollten:

.yourText { 
    text-rendering: optimizeLegibility; 
} 

Sie können versuchen, und verwenden Sie die Optionen wie font-stretch: normal; oder font-weight:normal; vielleicht helfen sie dir wenigstens ein wenig.

Answer 3

Sind Sie sicher, dass Sie den Zoom des Browsers nicht auf etwas unter 100% eingestellt haben? Es scheint so.