Photoshopの12ptはWebではまったく違って見える

現在Photoshopでウェブサイトを作成しており、フォントには12ptを使用しています。しかし、12ptのWebでフォントを見ると、はるかに大きく見えます。Webで12pxを使用する必要があるようですので、同じか似ています。

だから私の質問は、photoshopの12ptがwebの12ptと異なるように見えるのはどうしてですか？

ありがとう

だから私の質問は、photoshopの12ptがwebの12ptと異なるように見えるのはどうしてですか？

いくつかの理由があります。

1. それらは、さまざまなフォントレンダリングエンジンを備えたさまざまなメディアです。簡単に言えば、PhotoshopはWebブラウザーではありません。CSSとHTMLに基づいてレンダリングしません。

2. 計測タイプのポイントは、正確な計測ではありません。ポイントは、文字自体ではなく、文字の境界ボックスを参照します。フォントファイルとレンダリングエンジンの違いも、その違いの一因となる可能性があります。

3. PhotoshopのDPIおよびズームレベルとブラウザのズームレベル。彼らは単に変化することができます。

また、ブラウザー間で、またはデバイス間でさえ型の一致が得られない可能性があることにも注意してください。制御できない変数が多すぎます。そのため、Photoshopで作成したものがブラウザで表示されるものであると想定してはいけません。Photoshopは単にWebページではありません。出発点としては問題ありませんが、不変の青写真として扱わないでください。

（100％のズームレベルで）レンダリングされるフォントサイズは、画像のdpi設定にも依存します。

それらのいずれかを試してください：

• Webグラフィックの古い規格：72 dpi
• 通常のデスクトップディスプレイ：96 dpi

スコットの答えに加えて、PhotoshopやWebでフォントサイズが大きく異なる理由は、Photoshopがポイントを使用しているのに対し、Webはピクセルを使用しているためです（またはems、私はこれを強くお勧めしますpx）。

関係の計算は次のようになります。

ピクセル単位のフォントサイズ/ポイント単位のフォントサイズ=ブラウザのdpi（96）/ Photoshop画像の解像度（ppiまたはポイント/インチ）

したがって、72 ppiで13 ptフォントのPhotoshop画像がある場合、Webブラウザーでの表示に対応するピクセル単位のフォントサイズは次のようになります。

ピクセル単位のフォントサイズ=（13/72）* 96 = 17.3 px

あなたは見ることができ、ここで、変換テーブルを。

Photoshopとブラウザは両方とも異なるので、テキストサイズで可能です。私もこの問題を抱えているので、Googleで検索してhttp://pxtoem.comを見つけます。フォントサイズの仕組みと、テキストに使用できるフォントサイズを確認できます。

PhotoShopはブラウザーとは異なる方法で構築されるため、PhotoShopの12ピクセルはオンラインのWebサイトでは14ピクセルになる可能性があることを覚えておく必要があります。ブラウザーでさえ、奇妙に表示したり、要素を2ピクセル右に移動したりすることがあります。

ブラウザがWebサイトをレンダリングするとき、ptではなくpxを使用します。すべてが同じように見えるものはありません。見栄えがするように努力してください。