フォントのサイズは正確に何に変換されますか？

カスタムイメージに変換しようとしている40ピクセルのフォントがあります。画像のサイズを正確に一致させようとしていますが、正確なサイズを取得するのに問題があります。基本的には、これが結果です。フォントにXピクセルと表示されている場合、これは物理的にどういう意味ですか？

これは素晴らしい質問であり、かなり不満足な答えがあります。

タイプのサイズは、ピクセル、ポイント（1/72 "）、またはミリメートルで指定されているかどうかにかかわらず、em-squareの高さです。

これがややarbitrary意的な尺度であるとすると、

• フォントの正確な技術設計に依存する
• 印刷またはラスタライズされたサンプルから正確に測定することはできません

近似値として以外、あまり意味がなく、有用ではありません。

あなたの場合は、実験によりブラウザのレンダリングに合わせてPhotoshopで指定する必要のあるサイズを計算します。これはどのフォントでも一定の比率であることがわかりますが、ブラウザーまたはOSを変更した場合にこれが当てはまるとは思いません。

ASCII Time！以下の2つのボックスのふりは、1900年頃からのリードタイプのものです。当時、書体は鉛で鋳造されていました（または木材でルーティングされていました）。タイプを印刷ロックアップに設定するには、ソリッドブロックに接続する必要がありました。これが、タイプの次元（ポイント単位）の由来です。

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

上記の2文字はサイズが異なりますが、境界ボックスは同じです。そのため、ポイントに関しては、これらのフォントは両方とも同じサイズです。

現在、私たちは鉛や木材をあまりタイプしていません。そのほとんどはデジタルです。ただし、ポイントサイズの概念は、タイプが配置されるすべての文字に対して同じ高さの仮想ボックスがあるという点で依然として存在します。繰り返しますが、文字の形自体の物理的な測定値ではなく、ポイントサイズを定義するのはこの仮想ボックスです。レターフォームの実際のサイズは、多くの場合、ポイントサイズよりも小さくなります（さらに大きくすることもできます）。

そのため、ピクセル単位でのタイプの測定は機能しませんが、CSSなどでピクセル単位でタイプを「設定」できます。ブラウザは、宣言されたpxサイズの間で可能な限り変換を行います。しかし、それは常にあいまいな見積もりです。

最終的に、2つの書体のレターフォームを視覚的に見て、同じサイズであるとわかるまでそれぞれのサイズを変更する以外は、正確に同じサイズのレターフォームを取得する正確な方法はありません。

フォントの「フォントサイズ」とは、フォントの「em height」を指します。これは、フォント内の特定の文字の高さと必ずしも同じではありません。

通常、フォントのemの高さは同じ基本的な考え方に従います-最も低いディセンダー（文字の下部などg）から最も高いアセンダー（文字の上部など）までの距離に大まかに設定されますh。

ご覧のとおり、個々の文字がその範囲全体をカバーすることはありません。

デジタルフォントでは、フォントの「em height」はフォントデザイナーが選択するものであり、この規則にまったく準拠する必要はありません。デジタルタイプデザイナーはemサイズの基盤を選択できます。ただし、フォントは、少なくとも大まかに、上記の規則に準拠する傾向があります。タイプが金属ブロックで構成されていた昔、「emの高さ」はそれらのブロックの1つの高さでした。

現在、多くの現代書体には大文字などのアクセントも含まれています（などĆ）-これらのアクセントは従来の活版印刷のアセンダーの外側に拡張されているため、これら（およびおそらく他の特殊文字）は「em」の上部にあります。歴史的な理由により、これらを許可するためにemサイズを調整せず、emサイズを保持し、それらを拡張するだけです-このようなアクセントを使用するタイポグラファーは、通常、拡張するスペースがあることを確認する必要があります本文の行間は十分です。

ラインギャップ本文では、テキストの1つのラインの下降とその下の行のアセンダとの間に残された空間である-つまり、「フォントサイズ」とは、このラインギャップ測定を含んでいません。CSSフィールドの影響を受ける可能性がありますline-height。1.4は、行間がemの高さの0.4倍であるため、本文テキストの行全体が行間を含むemの高さの1.4倍になることを意味します。他のアプリケーションでは、行間を異なる方法で指定できます。ワードプロセッサは、しばしば「単一」行間隔の倍数で指定しますが、CSSとは異なり、通常「単一」間隔は行間がないことを意味しませんが、アプリケーションがフォントファイルのメタデータに基づいてデフォルトを見つけようとするギャップ。フォントでメトリックを指定するための複数の標準があり（たとえば、Truetypeでは、MacとWindows / OS2の標準が異なります）、デフォルトの行間はアプリケーションとオペレーティングシステム間で異なります。

現在、デザイナーが emの高さについて予測可能な慣習に従っている場合でも、大文字のサイズ（cap-height）または言うサイズo（x-heightまたはmidline）は変化する可能性があるため、これはまだわかりませんアセンダーの高さに関して、書体間で自由に。ただし、フォントファミリ内では、これらは通常一貫しています。したがって、たとえば、Times New Roman BoldとTimes New Roman Regularは、同じemサイズに対して同じ文字サイズになり、アセンダー、ディセンダー、cap-height、x-heightが含まれます。

縦棒文字（ '|'）を入力して、それを測定してください。私があなたの状況を正しく複製し、あなたのアンチエイリアスがそれをあまりぼやけていないなら、それは22pxであるべきです。

22pxは、タイプのブロックの高さを表します。しかし、各文字はブロックを別々に塗りつぶします。「g」または「q」はその22pxの下部領域を占有し、大文字と「b」または「d」のような小文字は上部を占有します。「|」は、22pxのスペースを完全に埋める唯一の（唯一ではないにしても）文字の1つです。

CSS設定と比較する方法はわかりませんが、Photoshopがテキストの高さを解釈する方法については説明しています。

フォントはピクセル単位で測定されていますか？ほとんどの場合、フォントはポイントで測定されます。ポイントは1/72インチです。そのため、40 ptフォントの高さは40/72 "または5/9"です。キッカーは、それが背の高い文字のアセンダーの上部からベースラインの下にぶら下がっている文字のディセンダーの下部までの寸法であるということです。上記のように、x-heightが時々使用されるのはそのためです。それは、上下に張り付かない小文字の高さです。

いずれにせよ、残念ながら測定値は決して正確ではありません。あなたがしようとしていることを成し遂げるには、いくらかの測定と計算（および/または試行錯誤）が必要です。