Wie berechnet man "Zeilenhöhe" aus der PSD-Datei?

19107
Avital Macabi

Ich habe eine .PSD und versuche, sie in HTML / CSS zu konvertieren.

Ich kann die Zeilenhöhe in CSS nicht aus der .PSD berechnen.

Wie kann ich die Zeilenhöhe aus der führenden berechnen?

5
Meinen Sie die Höhe der verwendeten Schrift und den Abstand zwischen den einzelnen Zeilen? Dave vor 11 Jahren 0
Ich kann nichts kommentieren oder hätte dies als Kommentar gesetzt. Dieser Artikel kann Ihnen bei der korrekten Einstellung der Zeilenhöhe in CSS helfen: http://www.thebrightlines.com/2009/12/26/differences-between-photoshop-web-design-and-html-part-1-line- Höhe/ Ryan vor 11 Jahren 0
Der Anfang ist der zusätzliche Platz, der über dem Text hinzugefügt wird. In HTML wird dieser zusätzliche Platz über und unter dem Text verteilt. Die Zeilenhöhe = 2 * führende Schriftgröße ??? Ich berechne so und es ist nicht richtig ... Avital Macabi vor 11 Jahren 0
Hier gibt es einen Rechner ohne Zeilenhöhe (relative ems): http://www.cssleading.com Rick Janusz vor 11 Jahren 0

3 Antworten auf die Frage

14
davidcondrey

Photoshop misst die Zeilenhöhe mit einer führenden, die nicht der CSS-Zeilenhöhe entspricht. Führend ist der Abstand zwischen dem unteren Rand einer Textzeile und dem oberen Rand der darunter liegenden Textzeile. Linienhöhe ist der Abstand zwischen der Hälfte der Linie oberhalb einer Linie und der Hälfte der Linie darunter.

So konvertieren Sie die Zeilenhöhe in Zeilenhöhe: Schriftgröße + (führende / 2) = Zeilenhöhe.

Wenn zum Beispiel die Schriftgröße in Photoshop 10px beträgt und die führende Schrift 18px ist, dann beträgt die Zeilenhöhe 19px ...

fontsize + (leading / 2) = lineheight 10 + (18 / 2) = ? 10 + 9 = ? = 19

Wenn in Photoshop kein führender Wert eingestellt ist, beträgt dieser 120% der Schriftgröße oder einfach

line-height: 1.2;

Darüber hinaus können Sie den entsprechenden CSS-Buchstabenabstand berechnen, der in einer PSD angezeigt wird.

Teilen Sie den Buchstabenabstandswert durch 1000. Wenn der Wert beispielsweise 20 ist, lautet Ihre Gleichung 20/1000 = 0,02

Der Buchstabenabstand beträgt jetzt 0.02em

Funktioniert dies, wenn die führende Schriftgröße kleiner als die Schriftgröße ist? Daniel Pendergast vor 6 Jahren 0
3
Andreas

Die einfachste Lösung ist, einfach die Textebene auszuwählen, mit der rechten Maustaste darauf zu klicken und "CSS kopieren" zu wählen. Fügen Sie es in den Notizblock oder etwas ein und lesen Sie die Werte von dort aus :)

Das scheint tatsächlich nicht die richtige Zeilenhöhe auszugeben. Zum Beispiel wäre die korrekte Zeilenhöhe gemäß der Formel von @ davidcondrey für meinen Fall 19.7125, aber die CSS-Funktion zum Kopieren von Photoshop notierte sie mit 0,8. JacobTheDev vor 7 Jahren 0
0
Dave

Sie sagen .PSD, also gehe ich davon aus, dass Sie Photoshop verwenden. In Photoshop können Sie das Lineal einschalten, um die Höhe in Pixel zu erhalten.

Oder verwenden Sie ein Bildschirmlineal (suchen Sie in Google nach "Bildschirmlineal"), um die Höhe in Pixeln zu ermitteln. Probieren Sie dann verschiedene Höhen in Ihrem CSS aus und messen Sie anhand des Bildschirmlineals, ob es genau sein muss.

Hallo, vielen Dank. Ich habe eine Frage: Das führende Feld ist der zusätzliche Platz, der über dem Text hinzugefügt wird. In HTML wird dieser zusätzliche Platz über und unter dem Text verteilt. Die Zeilenhöhe = 2 * führende Schriftgröße ??? Ich berechne das so und es ist nicht richtig ... Meine Frage ist, wo man das "Bildschirmlineal" setzt, um die Höhe zu bekommen ??? Avital Macabi vor 11 Jahren 0

Verwandte Probleme