web-dev-qa-db-ja.com

psdファイルから「行の高さ」を計算する方法は？

.PSDを持っていて、それをHTML/CSSに変換しようとしています。

.PSDからCSSの行の高さを計算できません。

行間から行の高さを計算するにはどうすればよいですか？

adobe-photoshophtmlcssphotoshop-cs5
5
Avital Macabi

enter image description here Photoshopは、CSSの行の高さと同じではない先頭の行の高さを測定します。リーディングとは、テキスト行の下部とその下のテキスト行の上部との間の距離です。ラインの高さは、ラインの上のリーディングの半分とその下のリーディングの半分の間の距離です。

先頭を行の高さに変換するには：フォントサイズ+（先頭/ 2）=行の高さ。

たとえば、Photoshopのフォントサイズが10pxで、行頭が18pxの場合、行の高さは19pxです...

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

Photoshopに先行値が設定されていない場合は、フォントサイズの120％、または単に

line-height: 1.2;

さらに、PSDに表示される適切なCSS文字間隔を計算します。

文字間隔の値を1000で割ります。たとえば、値が20の場合、方程式は20/1000 = 0.02になります。

文字間隔は0.02emになりました

14
davidcondrey

最も簡単な解決策は、テキストレイヤーを選択して右クリックし、[CSSをコピー]を選択することです。それをメモ帳か何かに貼り付けて、そこから値を読んでください:)

3
Andreas

あなたは.PSDと言うので、Photoshopを使用していると想定します。 Photoshop内で、ルーラーをオンにして高さをピクセル単位で取得できます。

または、オンスクリーンルーラー（「オンスクリーンルーラー」でGoogleを検索）を使用して、ピクセル単位で高さを取得します。次に、CSSでさまざまな高さを試して、正確である必要がある場合はスクリーンルーラーを使用して測定します。

0
Dave