15

ピクセルのフォントサイズがどれだけのスペースを占めるかを実際に理解する必要がある方程式を含む複雑なjs関数があります。

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

フォントのサイズはどのように計算されますか? 12pxcss で に設定されている場合、12pxどういう意味ですか? それは12px広いですか？高い？それとも斜めのピクセル測定ですか？

4

5 に答える 5

21

高さは標準的な尺度です

フォントの高さは、線の高さによって測定または指定されます。これは、 のように線の下にくぼんだものや、 のようjに隆起した要素 (たとえば、大文字のアクセント)を含む、文字の全範囲を表示するために必要な高さですÊ。

24px と 12px で異なるフォント
(出典: banzaimonkey.net )

出現順のフォント: Times New Roman、Courier New、Calibri、Consolas。

幅

上の画像でわかるように、グリフの幅はフォントによって異なります。プロポーショナルフォントとフォントの間にも重要な違いがありfixed-widthます。固定幅フォントの場合、各文字が行上で占めるスペースはまったく同じです (ただし、文字自体は互いに同じサイズではない場合があります。プロポーショナル フォントの場合、各文字が使用するスペースは、その形状は、他の文字と比較して、i、j、およびlは幅が狭く、w、m、およびoは通常幅が広いです。

フォント

フォント自体はさまざまな方法でグリフをレンダリングします (明らかに、フォントは見た目が異なるため)。これは、特定の文字がフォント間で同じ高さでレンダリングされるとは限らないことを意味します。また、フォントをレンダリングする以外に、特定の文字が特定のサイズでどのくらいの高さになるかを把握する標準的な方法がないことも意味します。

おそらくほとんどの人には明らかではありませんが、フォントのライセンス条項を調べると、フォント ソフトウェアとしてライセンスされていることがわかります。基本的に、各フォントには、特定のコンテキスト (さまざまなサイズ、ボールド、イタリックなど) でフォントをレンダリングする方法を決定する一連のアルゴリズムが含まれています。

したがって、特定のコンテキストでフォントがどのようにレンダリングされるかを理解する最善の方法は、実際にレンダリングして確認することです。

サイジングの問題

Web 上で何かを扱う場合、フォント サイズにはいくつかの注意事項があります。

ウェブ用

優れた Web デザイナーなら誰でも知っているように、同じものはありません。ブラウザ、デフォルト フォント、ズーム、スムージング、ヒンティング、ブラウザのスケーリング、オペレーティング システムのスケーリングなど、ページをレンダリングする際に影響を与える可能性のある変数は無数にあります。

A List Apart (サメを飛ばす前) には、フォント サイズの標準化と、ブラウザー間である程度の類似性を得るのに役立ついくつかの優れた記事があります。

十分な注意を払うことはできますが、Web メディアには制御できないレベルの変動性があることを受け入れる必要があります。

印刷とピクセル

ピクセルは通常、フォントの自然なスケールではないため (印刷には異なる測定値が使用されます)、ヒンティング アルゴリズムは、文字の形状を保持するために、特に小さいサイズで 1 ピクセルまたは 2 ピクセルずれたフォントをレンダリングする場合があります。

実際、小さいサイズではヒンティング アルゴリズムが完全に異なることが多く、専門的な作業では、12pt 未満のサイズではまったく別のフォントを使用することになるでしょう。

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

  • 1680x1050 の 20 インチ モニター
  • 1680x1050 の 22 インチ モニター
  • iPhoneの画面
  • ブラックベリースクリーン
  • 等

TL;DR

要約すると、それは複雑です。 font-size文字の全範囲を表示するために必要な高さを指しますが、ワイルドでウーリーなインターネットでは常に例外があります.

于 2010-08-16T19:13:43.820 に答える
7

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

フォント サイズは、タイポグラフィで使用される概念である em 正方形に対応しています。
特定のグリフは、em 四角形の外側ににじむ場合があることに注意してください。

于 2010-08-16T18:06:26.513 に答える
4

補足回答です。このサイトのチャートは、全体像を理解するのに非常に役立ちます。

文字サイズ換算表

于 2017-01-03T02:35:05.230 に答える
2

仕様による ( http://www.w3.org/TR/CSS2/fonts.html )

フォント サイズは、タイポグラフィで使用される概念である em 正方形に対応しています。特定のグリフは、em 四角形の外側ににじむ場合があることに注意してください。

于 2010-08-16T18:08:53.780 に答える