ホームページ  >  記事  >  ウェブフロントエンド  >  Html のフォント サイズ単位 px、em、pt の具体的な分析

Html のフォント サイズ単位 px、em、pt の具体的な分析

黄舟
黄舟オリジナル
2017-07-21 09:21:163696ブラウズ

Web ページのフォント サイズを定義する一般的な単位は、px、em、pt の 3 つです

px

px はピクセルの略で、Web の閲覧プロセス中に、テキスト、ピクセルに基づく単位です。画面上の写真などは解像度によって変わります。幅 100px の画像は、解像度 800×600 では画面幅の 1/8 しか占めません。解像度 1024×768 で 10 枚。したがって、フォントサイズを定義するときにピクセルを単位として使用すると、ユーザーが表示解像度を 800 から 1024 に変更すると、ユーザーが実際に見る文字が「小さく」(自然長単位)なり、不鮮明になる場合があります。 、ブラウズに影響します。

em

em: つまり、% は相対単位であり、長さの相対単位です。もともと文字 M の幅を指すため、em という名前が付けられています。現在は文字幅の倍数を指し、その使用法は 0.8em、1.2em、2em などのパーセンテージに似ています。通常は 1em=16px です。 、長さ (要素の余白やパディングなど) を測定するために一般的に使用される汎用単位で、フォント サイズを指定するために使用される場合、em 単位は親要素のフォント サイズを指します。

ページ上の親要素のフォント サイズを考慮して、1 つの要素を調整することですべての要素のサイズを比例的に変更できます。スケーラブルなスタイル シートの作成などに使用されます。

pt

PTとはポイント(ポンド)の略で、1/72インチの大きさの固定長さの測定単位です。 Web 上のテキストの単位として pt を使用すると、異なる画面でフォント サイズが同じ (同じ解像度) になり、組版に影響が出る可能性がありますが、Word で pt を使用すると非常に便利です。 Wordを使用する主な目的は画面閲覧ではなく、出力・印刷だからです。エンティティに印刷する場合、pt は自然な長さの単位として便利で実用的です。たとえば、Word の通常の文書では「Song font 9pt」が使用され、タイトルでは「Helvetica 16pt」が使用されます。コンピュータの設定に関係なく、pt は使用されます。印刷するときは常にこの大きさになります。

変換

ブラウザのデフォルトのフォント高さは 16px であるため、調整されていないブラウザでは 1em=16px、つまり 1px=0.0625em と表示されます。 font-size の変換を簡略化するために、CSS の本文で font-size=62.5% をグローバルに宣言できます。これは、デフォルトのフォント サイズが 16px*0.625=10px として定義されることを意味します。子要素はフォント サイズを継承します。親要素の 1em=10px、つまり 12px=1.2em。 px と em の間の変換は 10 を通じて取得できます。ただし、font-size=0.625em を定義したり、12px を直接定義しても効果はありません


さらに、IE が中国語の文字を処理する場合、浮動小数点値の精度は制限されます。上記の方法 (1.2em) IE の中国語文字は、12px で直接定義されたフォント サイズと等しくありませんが、わずかに大きくなります。 62.5% を 63% に置き換えるだけです。

ptとpxの変換式も比較的単純で、pt=px×3/4です。

以上がHtml のフォント サイズ単位 px、em、pt の具体的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。