現在、PSD からサイトを構築しています。ほとんどのフォントのレター トラッキングは -25 です ( <- AV->: 文字間隔の記号だと思いますか?)。
CSSで同じ効果を得るにはどうすればよいですか? プロパティがあることは知っていますがletter-spacing: X、パーセンテージを使用せず、-25px または pts は巨大な数字になります!
質問する
18250 次
4 に答える
25
Photoshop では、文字間隔は文字トラッキングと呼ばれ、具体的には各文字間のスペースです。問題は、Photoshop Letter Tracking が 1:1 を CSS の Letter Spacing に変換しないことです。
ただし、Photoshop から CSS への変換を計算するのは非常に簡単です。
Photoshop Letter Tracking を CSS Letter-spacing に変換する式
em方式
X / 1000 = Y
X is the value of the letter-tracking in Photoshop
Y is the value in "em" to use in CSS
例
次の例を考えてみましょう。Photoshop のレター トラッキング値は 200 です。
200 / 1000 = 0.2
結果はCSS で0.2emです。
px方式
「px」値を使用する場合、式は次のとおりです。
X * S / 1000 = P
X is equal to the letter-tracking value in Photoshop
S is the font-size in pixels
P is the resulted value in "px" to use in CSS
例
次の例を考えてみましょう。Photoshop のレター トラッキング値は 200 で、font-size 値は 10 です。
200 * 10 / 1000 = 2
結果はCSS で2pxです。
于 2014-09-15T02:30:48.770 に答える
10
emの代わりに寸法を使用しpxて、フォント サイズに相対的な間隔のサイズを変更できます (したがって、Photoshop の 25% は約.25emです)。
于 2012-11-22T09:47:14.170 に答える
8
このような文脈では、通常、単位のない数字は、単位のごく一部である印刷上の単位を意味しemます。通常は単に「ユニット」と呼ばれます。この単位の値はフォントによって異なり、UPM (units per em) 値として表されます。一般的な UPM 値は 1,000 ですが、Microsoft フォントには 2,048 があり、他の値も発生します。(この問題は記事UPM value of 1000 set in stone?である程度詳しく説明されています。 )
UPM 値を 1,000 とすると、-25 は -0.025em にマップされます。設定letter-spacing: -0.025emによる影響はかなり小さい傾向があります。長めのテキスト行は、「i」が約 1 つ短くなります。CSS を使用して得られる効果は、PhotoShop と同じであるとは期待できません。PhotoShop のレンダリング メカニズムは、ブラウザのレンダリング メカニズムとは異なります。
于 2012-11-22T11:00:54.737 に答える