Wir erstellen gerade eine Website in Photoshop und verwenden 12pt für die Schriftarten. Aber wenn wir die Schriftarten im Web mit 12pt sehen, sehen sie viel größer aus. Es scheint, dass wir 12px im Web verwenden müssen, damit es gleich oder ähnlich aussieht.
Meine Frage ist also, wie kann es sein, dass 12pt in Photoshop anders aussehen als 12pt im Web?
Vielen Dank
Meine Frage ist also, wie kann es sein, dass 12pt in Photoshop anders aussehen als 12pt im Web?
Aus ein paar Gründen.
Sie sind unterschiedliche Medien mit unterschiedlichen Font-Rendering-Engines. Einfach gesagt, Photoshop ist kein Webbrowser. Es wird nicht basierend auf CSS und HTML gerendert.
Punkte sind für den Messtyp keine exakte Messung. Punkte beziehen sich auf den Begrenzungsrahmen des Buchstabens – nicht auf den Buchstaben selbst. Unterschiede in Schriftartdateien und Rendering-Engines können ebenfalls zu diesem Unterschied beitragen.
DPI- und Zoomstufen in Photoshop vs. Zoomstufen im Browser. Sie können einfach variieren.
Denken Sie auch daran, dass Sie Ihren Typ wahrscheinlich nicht von Browser zu Browser oder sogar von Gerät zu Gerät erhalten. Es gibt einfach zu viele Variablen, die Sie nicht kontrollieren können. Daher sollte man niemals davon ausgehen, dass das, was sie in Photoshop erstellt haben, das ist, was sie im Browser sehen. Photoshop ist einfach keine Webseite. Als Ausgangspunkt ist es in Ordnung, aber behandeln Sie es nicht als unveränderliche Blaupause.
Die gerenderte Schriftgröße (bei einer Zoomstufe von 100 %) hängt auch von den dpi-Einstellungen Ihres Bildes ab.
Versuchen Sie eines davon:
Zusätzlich zu Scotts Antwort könnte der Grund, warum die Schriftgröße in Photoshop oder im Web sehr unterschiedlich ist, darin liegen, dass Photoshop Punkte verwendet, während das Web Pixel verwendet (oder , emswovon ich dringend abraten würde px).
Die Berechnung für die Beziehung würde in etwa so aussehen:
Schriftgröße in Pixel / Schriftgröße in Punkten = Browser-dpi (96) / Photoshop-Bildauflösung (ppi oder Punkte pro Zoll)
Wenn Sie also ein Photoshop-Bild mit 13pt-Schriftart bei 72 ppi haben, ist die entsprechende Schriftgröße in Pixel für die Anzeige in einem Webbrowser geeignet
Schriftgröße in Pixel = (13/72)*96 = 17,3 px
Eine Umrechnungstabelle können Sie hier einsehen .
Photoshop und Browser sind beide unterschiedlich, daher ist es in Textgröße möglich. Ich habe auch dieses Problem, also google es und finde http://pxtoem.com. Sie können sehen, wie die Schriftgröße funktioniert und welche Schriftgröße Sie für Ihren Text verwenden können.
Sie müssen bedenken, dass PhotoShop anders aufgebaut ist als ein Browser, was also 12 px in PhotoShop ist, kann auf einer Website online 14 px sein. Sogar Browser stellen manchmal Dinge seltsam dar oder verschieben ein Element um 2 px nach rechts.
Wenn Ihr Browser eine Website rendert, verwendet er px anstelle von pt. Nichts wird auf allem gleich aussehen, streben Sie einfach danach, dass es gut aussieht.
Nu Everest