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

Question

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

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

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

Answer 1

Photoshop измеряет высоту строки с начальным, который не совпадает с высотой строки 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ем.

Answer 2

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

Answer 3

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

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