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

19015
Avital Macabi

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

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

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

5
Вы имеете в виду высоту используемого шрифта и расстояние между строками? Dave 10 лет назад 0
Я не могу комментировать, или я бы поставил это как комментарий. Эта статья может помочь вам правильно настроить высоту строки в CSS: http://www.thebrightlines.com/2009/12/26/differences-between-photoshop-web-design-and-html-part-1-line- рост/ Ryan 10 лет назад 0
ведущий - это дополнительное пространство над текстом. В HTML Это дополнительное пространство распределяется над и под текстом. Высота строки = 2 * начальный + размер шрифта ??? Я так рассчитываю и это не правильно ... Avital Macabi 10 лет назад 0
Здесь есть калькулятор высоты строки (относительные ems) без единиц измерения: http://www.cssleading.com Rick Janusz 10 лет назад 0

3 ответа на вопрос

14
davidcondrey

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

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

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

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

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

line-height: 1.2;

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

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

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

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

The easist solution is to just select the text-layer, right click on it and select "Copy CSS". Paste it into notepad or something and read the values from there :)

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

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

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

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

Похожие вопросы