Photoshopで設定した文字のトラッキング値をCSSの同等の文字間隔に変換します

Question

現在PSDからサイトを構築しています。ほとんどのフォントは-25（<- AV->：私はそれが文字間隔の記号であると推測していますか？）の文字追跡を持っています。

CSSでどのように同じ効果を得ることができますか？私はプロパティがletter-spacing: Xだと知っていますが、パーセンテージを取らず-25pxまたはptsが巨大な数字になります！

Answer 1

pxの代わりにemディメンションを使用すると、フォントサイズに合わせてスペースを調整することができます（したがって、Photoshopの25％は.25em付近です）。

Answer 2

あなたの問題は単位変換と単純である場合は、em 10進数が許可されていますが、それはレンダリングの精度を変更しない代わりにpx

のemを使用することができます。 0.5pxまたは同等の精度がブラウザに表示されていない - 0または1pxになります。画面が半分のピクセルを表示できないため、アンチエイリアスを使用した場合に比べると近似できます。

小さいフォントの場合、アンチエイリアスはおそらく間隔よりも悪くなります。別のオプションは、デフォルトで必要な間隔を持つWebフォントを見つけることです。こうすることで、似たような結果が得られますが、フォントを変更することになります。

CSS間隔は、単にPhotoshopほど正確ではありません。 1つの理由は、Photoshopが印刷用にレンダリングすることです。スクリーン/ピクセル解像度ではピクセル精度で処理する必要があります。理論的には文字の間隔はズームなどでより正確になる可能性がありますが、私は実際にそのように動作する実装についてはわかりません。

正しい文字間隔が本当に重要な場合は、SIFRを使用して、ブラウザが可能なフォント間隔よりも正確にフォントをレンダリングしようとすると、アンチエイリアスの変更を使用できる可能性があります。明らかに、これは文字間隔が大きな問題である場合にのみ意味をなさないでしょう。

Answer 3

このような文脈では、単位のない数字は、通常、em単位の小さな部分である活字単位を意味します。それは通常単なる「単位」と呼ばれます。この単位の値はフォントに依存し、UPM（em per units）値で表されます。一般的な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のレンダリングメカニズムはブラウザのレンダリングメカニズムとは異なります。

Answer 4

Photoshopの文字間隔は文字追跡と呼ばれ、具体的には各文字の間のスペースです。問題は、Photoshopの文字のトラッキングが1：1をCSSのレタースペースに変換しないことです。

PhotoshopからCSSへの変換は非常に簡単です。CSS文字間隔にPhotoshopの手紙の追跡を変換する

式

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 

結果は次のとおりです。 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と、フォントの文字の追跡値を持っています - サイズ値10。

200 * 10/1000 = 2 

結果はCSSで2pxです。