ピクセルを数えてフォントサイズの設定をする方法は？

提案されたウェブサイトの画像があります。

ピクセルをカウントして、テキストに設定するpxのfont-size値をどのように計算しますか？

たとえば、フォントサイズ：14px（Arialで）がありますが、「L」の上から「p」の尾まで数えます。「L」の10ピクセルを数えます。 「p」。これは明らかに私には与えられません14。

ピクセルを確実にカウントしてfont-size値を計算する方法はありますか？

一般的な問題のほとんどは、フォントのサイズが正確に何に変換されるかによって解決されます。-つまり、サイズは特定のものを実際に意味するものではありません。

ただし、既知の特定のフォントを使用している場合は、実際にモックアップのピクセル数をその公称ピクセルサイズに変換できるはずです。比率を計算するには、少し実験する必要があります。

しかし、これを比較するとはるかに簡単です。つまり、モックアップと一致するまでWebページのサイズを変更し、必要に応じてスクリーンショットをオーバーレイするだけです。ただし、ブラウザーのフォントレンダリングが、Photoshopレンダリングまたは別のプラットフォームでのブラウザーレンダリングと正確に一致する可能性は低いことに注意してください。

通常のテキストサイズでは、ほとんどのフォントは1〜4ピクセルの「バッファ」の上から下に配置されます。

通常、CSSとの比較時に使用したピクセルサイズを直接適用できます。IOW、Photoshop / Illustratorが130％リードで14pxと言った場合、CSSは

font-size:14px
line-height:1.3em

ピクセルのカウントは信頼できるとは思いません。理由は、Photoshopなどでフォントを循環させると、フォントが常にランダムなサイズで表示されるためです。PSはWebではないことはわかっていますが、これは、あるフォントの14pxが別のフォントの場合よりもはるかに大きくなることを示しています。

スクリーンショットをPhotoshopに取り込み、整列させることに成功しました。もちろん、スクリーンショットが100％で、フォントが同じであることを確認する必要があります。

ただし、Webページが使用しているフォントサイズを確認する最良の方法は、Webページのソースを表示することです。style="font-size: 14px;"タグのどこかで言及されていない場合は、スタイルシートにあります（可能性が高い）。.cssで終わるページコードの上部近くにあるリンクを探し、そのリンクにアクセスします。font-sizeおよびfont-family宣言を探します。これにより、使用されているフォントと、Webページのさまざまな要素のサイズがわかります。