Как рассчитать «высоту строки» из файла psd?

5

У меня есть .PSD, и я пытаюсь преобразовать его в HTML / CSS.

Я не могу рассчитать высоту строки в CSS из .PSD.

Как я могу рассчитать высоту линии от лидирующей?

Я не могу комментировать, или я бы поставил это как комментарий. Эта статья может помочь вам правильно настроить высоту строки в CSS: thebrightlines.com/2009/12/26/...

— Ryan

Вы имеете в виду высоту используемого шрифта и расстояние между строками?

— Dave

ведущий - это дополнительное пространство над текстом. В HTML Это дополнительное пространство распределяется над и под текстом. Высота строки = 2 * начальный + размер шрифта ??? Я так рассчитываю и это не правильно ...

— Avital Macabi

Здесь есть калькулятор высоты строки (относительные ems) без единицы измерения: cssleading.com

— Rick Janusz

14

Photoshop измеряет высоту строки с начальным, который не совпадает с высотой строки CSS. Ведущая - это расстояние между нижней частью строки текста и верхней частью строки текста под ней. Высота линии - это расстояние между половиной отведения над линией и половиной отведения под ней.

Чтобы преобразовать ведущий в высоту строки: размер шрифта + (ведущий / 2) = высота строки.

Так, например, если размер шрифта в Photoshop равен 10px, а начальный - 18px, то высота строки составляет 19px ...

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

Если в Photoshop не установлено начальное значение, оно составляет 120% от размера шрифта или просто

line-height: 1.2;

Кроме того, чтобы рассчитать соответствующий межбуквенный интервал CSS, как показано в PSD.

Разделите межбуквенное значение на 1000. Например, если значение равно 20, ваше уравнение будет 20/1000 = 0,02

Теперь межбуквенный интервал равен 0,02ем.

— davidcondrey
источник

Работает ли это, когда начальный размер меньше размера шрифта?

— Daniel Pendergast

3

Самое простое решение - просто выбрать текстовый слой, щелкнуть по нему правой кнопкой мыши и выбрать «Копировать CSS». Вставьте его в блокнот или что-то еще и прочитайте значения оттуда :)

— Andreas
источник

Это на самом деле не похоже на правильную высоту строки. Например, правильная высота строки в соответствии с формулой @ davidcondrey для моего случая будет 19,7125, но функция Photoshop «Копировать CSS» отображает ее как 0,8.

— JacobTheDev

0

Вы говорите. PSD, поэтому я буду предполагать, что вы используете Photoshop. В Photoshop вы можете включить линейку, чтобы получить высоту в пикселях.

Или используйте линейку на экране (поищите в Google «экранную линейку»), чтобы получить высоту в пикселях. Затем попробуйте различные высоты в вашем CSS и используйте линейку экрана, чтобы измерить ее, если она должна быть точной.

— Dave
источник

Привет, спасибо большое. У меня есть вопрос: ведущим является дополнительное пространство, которое добавляется над текстом. В HTML Это дополнительное пространство распределяется над и под текстом. Высота строки = 2 * начальный + размер шрифта ??? Я так вычисляю и это не правильно ... У меня вопрос, где поставить "линейку экрана", чтобы получить высоту ???

— Avital Macabi