フォントサイズはどのように計算されますか？

Question

私は、ピクセルのフォントサイズのスペースの量を実際に理解する必要がある方程式を持つ複雑なJS関数を持っています。

フォントのサイズは、フォントによって異なることに気付きました。

フォントのサイズはどのように計算されますか？に設定されている場合 12px, 、CSSでは、何をしますか 12px 平均？それです 12px 幅？高い？それとも、斜めのピクセル測定ですか？

Answer 1

を参照してください 仕様:

フォントサイズは、タイポグラフィで使用される概念であるEMスクエアに対応しています。
特定のグリフがEM正方形の外に出血する可能性があることに注意してください。

Answer 2

高さは標準測定です

フォントの高さは、ラインの高さによって測定または指定されます。これは、ラインの下に浸るキャラクターを含む、キャラクターの範囲を表示するために必要な完全な高さです。 j, 、および上げられた要素（たとえば、首都のアクセント）のような Ê.

_{（ソース： banzaimonkey.net)}

外観の順にフォント：Times New Roman、Courier New、Calibri、Consolas。

幅

上の画像でわかるように、グリフの幅はフォント間で異なります。間にも重要な区別があります 比例 と fixed-width フォント。固定された幅のフォントの場合、各文字がライン上で取り上げるスペースはまったく同じです（ただし、文字自体は1つの別のサイズとはまったく同じではありません。比例フォントの場合、各キャラクターが使用するスペースはより並んでいます。他の文字と比較して、その形状はそうです 私, j, 、 と l 狭くなりますが、 w, m, 、 と o 通常、より広いです。

フォント

フォント自体はさまざまな方法でグリフをレンダリングします（明らかに、フォントは異なって見えるため）。これは、特定の文字が必ずしもフォント全体で同じ高さをレンダリングするわけではないことを意味します。また、フォントのレンダリングを除いて、特定のキャラクターが特定のサイズでどれだけの高さがあるかを把握する標準的な方法がないことを意味します。

ほとんどの人にとっては明らかではありませんが、フォントのライセンス条件を調べると、ライセンスが取られていることに気付くと フォントソフトウェア. 。基本的に、各フォントには、特定のコンテキスト（さまざまなサイズ、太字、斜体など）でフォントのレンダリング方法を決定するアルゴリズムのセットが含まれています。

その結果、特定のコンテキストでフォントがどのようにレンダリングするかを把握する最良の方法は、それをレンダリングして見ることです。

サイジングの問題

Web上のものを扱っているとき、フォントサイズの注意事項がいくつかあります。

ウェブ用

優れたWebデザイナーが知っているように、等しいものはありません。ブラウザ、デフォルトのフォント、ズーム、スムージング、ヒント、ブラウザのスケーリング、オペレーティングシステムスケーリングなど、ユーザー間に違いをもたらす可能性のあるページをレンダリングするときに、機能する数え切れないほどの変数があります。

（サメにジャンプする前に）離れたリストには、フォントサイズの標準化とあなたが得るのに役立ついくつかの良い記事があります いくつかの ブラウザ間の類似性のレベル：

• サイズが重要です
• 相対フォントサイズ
• テキストのサイズ変更検出
• Web上のタイプをベースライングリッドに設定します

デューデリジェンスを行うことはできますが、Webメディアには制御できない特定のレベルの変動性が含まれることを受け入れる必要があります。

印刷とピクセル

ピクセルは通常、フォントの自然なスケールではないため（印刷には異なる測定が使用されます）、ヒントを示すアルゴリズムは、文字の形状を保持するために、特に小さなサイズでピクセルまたは2つだけフォントをオフにする可能性があります。

実際、ヒントアルゴリズムは多くの場合、小型サイズで完全に異なります。プロの仕事では、おそらく12pt未満のサイズに完全に異なるフォントを使用するでしょう。

ピクセルはディスプレイサイズにも関連しているため、12pxはこれらのディスプレイで異なる物理サイズになります。

• 1680x1050で20 "モニター
• 22 "1680x1050でモニター
• iPhone画面
• ブラックベリー画面
• 等

tl; dr

要約すると、それは複雑です。 font-size キャラクターの範囲を表示するために必要な高さを指しますが、野生と羊毛のインターネットには常に例外があります。

Answer 3

これは補足的な答えです。からチャートを見つけました このサイト 全体像を理解するのに非常に便利です。

Answer 4

スペックごと（http://www.w3.org/tr/css2/fonts.html)

フォントサイズは、タイポグラフィで使用される概念であるEMスクエアに対応しています。特定のグリフがEM正方形の外に出血する可能性があることに注意してください。

EMスクエアのサイズが説明しました： http://www.emdpi.com/emsquare.html

Answer 5

使用する必要があります .getClientRects() テキストの実行がどれだけのスペースであるかを知る必要がある場合は、画面に表示されます。

あなたが設定したものとあなたが得るサイズの間の実際の相互作用はやや複雑です。 CSS3仕様は、他の回答で引用されているCSS2仕様よりもはっきりとそれを置きます：

このプロパティは、フォントからのグリフの望ましい高さを示しています。スケーラブルなフォントの場合、フォントサイズはフォントのEMユニットに適用されるスケール係数です。

基本的に、「em Square」のサイズを制御できます。フォントの形状はこれに比べて定義されていますが、確かにこのボックス内/内部（時には大幅に）内部に迷子になる可能性があります。

そして、それはまずのためだけです！このem-squareと非常に密接に一致するフォントを想定していても、文字列の長さにこのサイズを掛けるだけですか？それがモノスパッチであり、あなたのテキストがascii-onlyでない限り、あなたは心配することがたくさんあります：さまざまな文字幅、カーニングと結紮、包装動作、そしてもちろん、タブ、ユニコードを組み合わせた文字、コントロールコードなどの他のさらに単純な「文字列長」警告。