css pxまたはremでPhotoshopの文字間隔を計算するには？

誰でも、css pxまたはremでフォトショップの文字間隔を計算する方法を知っています。例：Photoshopに140文字のスペースがあります。 CSSでこれはどうでしょうか？これを行う方法はありますか？css pxまたはremでPhotoshopの文字間隔を計算するには？

出典

2017-10-28 Harden Rahul

を正直なところ、私は通常は/、それの地獄をテストしてください、私のコンテナ幅＆フォントサイズの試合にデザインカンプを作りますpsd _exactly_そして改行が始まる言葉に細心の注意を払ってください。 .01emは始めるのに適しています。 – admcfajn

@admcfajn私はあなたに同意しますが、私たちはクライアントのために働き、彼らは自分のウェブサイトをpxからpxにテストします。その場合、毎回計算や実験をする時間がありません。 –

私が頻繁に使っているのは、精度の高いフロントエンドの作業で、パーセンテージを見つけることです。フォントサイズが50px、文字間隔3pxだとします。 3/50 = 0.06。あなたのPSDは何の単位ですか？あなたはphotoshopからCSSをエクスポートする方法を尋ねていますか？スケッチはそのためのより良いプログラムです。それはあなたが考えるかもしれない多くのより速く行く。すべての単語をテストする必要はありません、psdにはいくつのデザイン要素がありますか？良いデザインが繰り返されるので、必要に応じて各スタイルのベースラインを見つけ、QA中に微調整することができます。プリコンパイラを使用していますか？そこにいくつかの機能を投げ込むことは助けになるかもしれません。 – admcfajn

Photoshopの値を1000で割り、その結果をemに設定すると、ピクセル完全な結果が得られます。

たとえば、Photoshopで文字間隔を50とすると、結果のCSSはletter-spacing: 0.05emになります。

あなたは数学毎回行う助けるために簡単な関数を作成します。

@function letter-spacing($ps-value) { 
    @return ($ps-value/1000) * 1em 
}

出典

2017-10-30 12:02:16 Steve

あなたは正しいかもしれませんが、私もあなたのコードを試しましたが、私はそれが正確ではないことが分かりました。それはPhotoshopの視覚的なものです。しかし、努力のおかげでいつもありがとう。 –

@HardenRahul Steveの答え（彼は完全に正しい）のためではなく、Photoshopとブラウザのフォントレンダリングの違いのために、正確ではないと予想されます。 – Flying

@flyingは答えが100％正確ではないことを意味します。 –

css pxまたはremでPhotoshopの文字間隔を計算するには？

答えて

関連する問題