知っておくべき CSS テキスト サイズ単位 PX、EM、PT_html/css_WEB-ITnose

要約: ここで引用した記事は Jorux の「中国の Web サイトの 95% は CSS を書き換える必要がある」です。 タイトルは少し怖いですが、現在の国内の Web ページ制作におけるいくつかの欠陥を反映しています。 pxとemの関係や特徴が全く分かりませんでしたが、読んでとても勉強になりました。通常、px はフォントの定義に使用されますが、...

ここで引用されているのは Jorux の記事「中国の Web サイトの 95% は CSS の書き換えが必要」 ちょっと怖いタイトルですが、確かに今のことを書いています。国内のウェブページ制作にいくつかの欠陥があります。 pxとemの関係や特徴が全く分かりませんでしたが、読んでとても勉強になりました。通常、フォントの定義にはpxが使用されるため、ブラウザのフォント拡大機能は使用できず、ほとんどの海外サイトはIEで利用可能です。理由:

1. IE は px を単位として使用するフォント サイズを調整できません。 2. ほとんどの海外の Web サイトがフォントの単位として em を使用しているためです。 3 . Firefox は px と em を調整できますが、中国のネットユーザーの 96% 以上が IE ブラウザ (またはカーネル) を使用しています。

px ピクセルは長さの相対単位であり、ピクセル px はモニター画面の解像度に対する相対値です。 （CSS2.0マニュアルより引用）

Emは、現在のオブジェクト内のテキストのフォントサイズに対する相対的な長さの単位です。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。 (CSS2.0 マニュアルより引用)

フォント単位として em を使用すると、IE6 でフォント スケーリングをサポートできます。ページ上で Ctrl+スクロール ホイールを押すと、ピクセル単位のフォントを使用する Web サイトは応答しません。

px

は絶対単位であり、IEのスケーリングをサポートしていません。

em

は相対単位であり、Webページ上の文字を拡大・縮小することができます。行の高さと垂直の高さの単位には em を使用します。スケーリング時の整合性を確保します。

どのブラウザでもデフォルトのフォントの高さは16pxです。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。 font-size の変換を簡略化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、単位を em に変更するだけです。

em には次の特徴があります:

1. em の値は固定されません

2. em は親要素のフォント サイズを継続します。

そのため、CSSを書くときは次のことに注意する必要があります:

1. bodyセレクターでFont-size=62.5%を宣言します(Font-size=63%; ie6互換性の場合)

2 . 元の px 値を 10 で割って、単位を em に変更します

3. 拡大されたフォントの em 値を再計算します。フォント サイズを繰り返し宣言することは避けてください。

それは、1.2 * 1.2= 1.44 という現象を避けるためです。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言するときは、1.2em ではなく 1em のみにすることができます。これは、この em が他の em ではなく、それが義務付けられているためです。 #contentのフォントの高さは1em=12pxになりました。

ただし、例外は 12px の漢字です。つまり、上記の方法で得られる 12px (1.2em) の漢字は、IE で 12px で直接定義されるフォント サイズと等しくなく、わずかに大きくなります。この問題は Jorux によって解決されました。ボディセレクターの 62.5% を 63% に変更するだけで正常に表示されます。その理由は、IE が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。他に説明があるかどうかはわかりません。

単位ptの説明

印刷や写植において、ポイントは絶対値であり、定規で測定できる物理的なインチである1/72インチに相当します。ただし、CSS における pt の意味は同じではありません。ディスプレイはピクセルに分割されており、1 つのピクセルは 1 つの色しか持つことができないためです (簡単にするために、ここではサブピクセル アンチエイリアシング テクノロジについては説明しません)。サブピクセル アンチエイリアシング テクノロジを画面上に表示するには、まず長さを pt 単位に変換する必要があります。単位はピクセル単位の長さであり、この変換の媒体は DPI です (実際、ここでのいわゆる DPI は、オペレーティング システムとブラウザーで使用される用語です。つまり、PPI、1 インチあたりのピクセル、スキャナー、プリンターなどで使用されます)。デジタル カメラの DPI は異なる概念です)。

たとえば、どのオペレーティング システムであっても、Firefox ブラウザのデフォルトの DPI は 96 なので、実際には 9pt = 9 * 1/72 * 96 = 12px となります。

つまり、「DPI」の「I」と「1pt は 1/72 インチに等しい」の「インチ」は物理的なインチを表すものではありませんが、これら 2 つの単位は互いに等しい、つまり掛け算でほぼ失われます。 。

それでは、実際の物理的な長さを計算するにはどうすればよいでしょうか? 定規を取り出し、モニターの表示幅 (私の場合は 11.2992 インチ) を測定し、それを水平解像度 (私の場合は 1024 ピクセル) で割ってください。結果はピクセルの物理的な長さになります。

これで、Web ページ上の 9pt フォントが占めるスペースはどれくらいですか? という質問に答えることができます。答えは、9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 インチ = 0.3363 センチメートルです。

ptは絶対単位ですが、出力デバイス専用です、テキスト組版ツール（word、abobe）では非常に便利なフォント単位です。モニターの解像度が何であっても、紙に印刷された結果は同じです。

しかし、ウェブページは主に画面表示を目的としており、印刷などのニーズを目的としたものではありません。また、px は画面上の要素の位置とサイズを正確に表すことができます。

もちろんです。 dpiが96の場合、9pt=12pxとなります。

px、em、%、ptの換算表を添付します